javascript - 使用jquery显示和隐藏产品li

Question

我有一个 list

<ul class="products">
   <li class="products">first</li>
   <li class="products">second</li>
   <li class="products">third</li>
   <li class="products">fourth</li>
</ul>

我想使用 jquery 来:
1-当用户点击除所点击的li之外的li时，隐藏其他li。
2-当用户再次单击事件 li 时显示所有 li。

这是脚本:

$(window).load(function(){
$(".products li.active").click(function(){
    $(".products li").show("slow");
    $(this).removeClass("active");
});
$(".products li").click(function(){
    $(this).addClass("active");
    $(".products li:not(.active)").hide("slow");
});
});  

它适用于第一步，但是当用户单击事件 li 时，没有任何变化。

Answer 1

试试这个:

$(window).load(function(){
   $(".products li").click(function(){
      if ($(this).hasClass("active")) {
          //this is already active, show all
          $(".products li").show("slow");
          $(this).removeClass("active");
      } else {
          //this is not active yet, make active and hide all others
          $(this).addClass("active");
          $(".products li:not(.active)").hide("slow");
      }
   });
}); 

Live demo available here on JsFiddle