根据所选李显示相关李

Show related li according to selected li

本文关键字：显示 李显示      更新时间：2023-09-26

我有一个列表：

<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是类为p2的li，则需要显示以下描述li，然后隐藏其他li：

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

描述李隐藏在开头
我不知道如何根据班级名称选择正确的李。应该有一个jQuery技巧，通过带掩码的类名来选择李！

将.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示例

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

相关文章：