javascript - 根据选定的李显示相关李

Question

我有一个列表:

<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-当用户点击除所点击的li之外的li时，隐藏其他li。
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。应该有一个 jQuery 技巧来通过类名和掩码选择 li !

Answer 1

将 .active 类添加到下一个 li ($(this).next().addClass("active");),并且还将选择器更改为 li.products，因为所有 li 都是可点击的:

$(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 Example