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 - 当用户点击除被点击的一个以外的其他用户时隐藏其他用户 2 - 当用户再次点击活动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 class="description p2">second</li>

说明li s隐藏在开头。
我不知道如何根据班级名称选择正确的李。应该有一个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

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/

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

2 个答案: