切换多个元素的类

Question

我有以下无序列表

<ul>
<li class="item">Link 1</li>
<li class="item">link 2</li>
<li class="item">Link 3</li>
</ul>

我目前正在使用以下javascript将类"open"切换为引用了“item”类的任何<li>元素。

  $(document).ready(function(){
      $('.item').click(function(){
        $(this).toggleClass('open');
      });
    });

我想这样做，以便班级"open"一次只能应用于一个"item"元素。

因此，例如：如果用户点击"Link 2"后点击了"Link 1"。 "Link 1"会丢失"open"课程，而"open"课程会归因于“Link 2”。

Answer 1

你可以在你的jQuery中这样做：

 $(document).ready(function() {
   $('.item').click(function() {
     $(this).toggleClass('open');
     $(this).siblings().removeClass('open');
   });
 });

这基本上将open类归因于您点击的项目，同时将其从具有相同类别的任何siblings中删除。

小提琴 - https://jsfiddle.net/pnortmrL/