1

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

<ul class="products">
  <li class="products p1">first</li>
  <li class="description p1">first</li>
  <li class="products p2">second</li>
  <li class="description p2">second</li>
  <li class="products p3">third</li>
  <li class="description p3">third</li>
  <li class="products p4">fourth</li>
  <li class="description p4">fourth</li>
</ul>

そして、jqueryを使用して次のことを行います。1-
クリックされたもの以外のユーザーがクリックしたときに他のリストを非表示にします。
2-ユーザーがアクティブなliをもう一度クリックすると、すべてのliが表示されます。
以下のスクリプトを使用しました。 

$(window).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");
     }
});
});

正常に動作します。
ここで、アクティブなliに関連する説明liを表示します。
たとえば、アクティブなliがclass：p2のliである場合、以下の説明liを表示する必要があり、その他のliは非表示になります。 

  <li class="description p2">second</li>

説明liは最初は非表示になっています。
クラス名に応じて正しいliを選択する方法がわかりません。マスクを使用してクラス名でliを選択するjQueryのトリックがあるはずです！

4

2 に答える 2

1

.activeクラスを次のli( ) に追加し、すべてがクリック可能であるため、$(this).next().addClass("active");セレクターを に変更します。li.productsli

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

JSFiddle の例

于 2012-09-07T12:45:21.720 に答える
0

.next()jQuery関数を使ってみてください。説明は常にliアクティブな要素の次の要素であるため、次の兄弟を取得して を使用できるはずです.show()。 

.next():

Get the immediately following sibling of each element in the set of matched elements. If a   
selector is provided, it retrieves the next sibling only if it matches that selector.

http://api.jquery.com/next/

于 2012-09-07T12:45:33.450 に答える