单击li时，将隐藏类添加到所有li，但不添加到单击的li，如果使用jquery已删除该类，则将其删除

Question

在三个列表项的列表中，当我单击Item1隐藏类时，应将其应用于Item2和Item3；当再次单击Item2时，应检查并删除先前添加的隐藏类，然后将隐藏类应用于项1，项2使用jQuery，我为此编写了脚本，但没有得到预期的结果？

<ul class="main-menu">
  <li class="">list 1</li>
  <li class="">list 2</li>
  <li class="">list 3</li>

</ul>



 <script>
    $(document).ready(function () {
    var link = $('.main-menu li');

     $(this).on('click', function () {
     link.not($(this)).parent().addClass('hide-class');

     if($(this).hasClass('hide-class')){
     $(this).removeClass('hide-class');
   }
});

});

    </script>

Answer 1

所以选择兄弟姐妹，而不是父元素

$('.main-menu').on('click', 'li', function () {  // listen to clicks on the li
    $(this)  // li that was clicked
     .removeClass('hide-class')  // remove the class
     .siblings()  // get the li's siblings
       .addClass('hide-class')  // add the class
});