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

Question

我有一个清单

<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。
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");
      }
   });
}); 

JsFiddle 上提供现场演示

Answer 2

这些选择器在你绑定事件的那一刻被评估——所以第一个click事件不会被绑定到任何东西。改用单个函数并检查该函数内的类：

$(document).ready(function() {
    $(".products li").click(function() {
        if($(this)).hasClass('active') {
            $(".products li").show("slow");
            $(this).removeClass("active");
        } else {
            $(this).addClass("active");
            $(".products li:not(.active)").hide("slow");
        }
    });
});

哦，使用 DOMReady ( $(document).ready()) 事件而不是 WindowLoaded 事件...

Answer 3

您不需要有 2 个点击事件：

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

Answer 4

你可以这样做

$(".products li.active").live("click",function(){
    $(".products li").show("slow");
    $(this).removeClass("active");
});

$(".products li:not('.active')").live("click",function(){
    $(this).addClass("active");
    $(".products li:not(.active)").hide("slow");
});

JS 小提琴 </p>