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

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。
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 示例

Answer 2

尝试使用.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/