2

私はリストを持っています 

<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 を使用して次
のことを行います。
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をクリックしても何も変わりません。

4

4 に答える 4

2

これを試して：

$(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 でライブ デモを利用できます

于 2012-09-07T11:07:01.890 に答える
1

これらのセレクターは、イベントをバインドした時点で評価されるため、最初の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");
        }
    });
});

ああ、そして WindowLoaded$(document).ready()イベントの代わりに DOMReady ( ) イベントを使用してください...

于 2012-09-07T11:06:12.267 に答える
0

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");
        }
    });
});
于 2012-09-07T11:06:59.533 に答える
0

あなたはこのようにすることができます

$(".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>

于 2012-09-07T11:12:05.170 に答える