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 - 当用户点击除被点击的一个以外的其他用户时隐藏其他用户 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

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 Fiddle

使用jquery显示和隐藏产品li

4 个答案: