使用 jquery 显示和隐藏产品 li答案

【问题标题】：Show and Hide product li using jquery使用 jquery 显示和隐藏产品 li
【发布时间】：2012-09-07 11:04:15
【问题描述】：

我有一个清单

<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 时，没有任何变化。

【问题讨论】：

$(".products").on("click", "li.active", function(...

标签： javascript jquery list show-hide

【解决方案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

【讨论】：

【解决方案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 事件...

【讨论】：

【解决方案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");
        }
    });
});

【讨论】：

哈哈！我们俩同时回答了相同的解决方案。您在 ("active"){} 的第 3 行有一个错字。 :) 干杯。

【解决方案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 Fiddle

【讨论】：