Question

我有一个简单的jQuery切换类＆＃34;活跃＆＃34;点击一下li：

$('li').click(function() {
    $(this).toggleClass('active');
});

我想要发生的是隐藏列表中的其他所有li（显示：无）然后当您再次单击活动的li时，它会删除活动的类，但会将所有其他的li设置为再次可见。这就是我正在努力实现的目标。

我尝试在点击功能中使用if语句检查＆＃34;是否有效＆＃34; class存在，如果它确实将所有li设置为隐藏，如果它没有设置css再次显示它们，但这不起作用。

编辑：

tilz0R的答案几乎就是我想要的，我只是稍微修改它以满足我的需要。

$('li').click(function() {
    $(this).toggleClass('active').siblings().toggleClass('hidden');
});

隐藏的类只有display：none，所以其他所有其他li被隐藏起来，而不是被点击的那个，然后在活动li的第二次点击时再次显示所有其他li。

Answer 1

您必须找到当前li元素的兄弟姐妹。

$('li').click(function() {
    $(this).toggleClass('active').siblings().hide();
});

Answer 2

当您点击任意<li>标记时，除了选定的<li>之外，所有<li>标记都将被隐藏。再次单击，然后所有<li>标记将显示并删除活动类。

HTML：

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>forth</li>
</ul>

jQuery的：

    jQuery('ul li').click(function() {
      if(jQuery(this).hasClass('active')) {
        jQuery(this).removeClass('active');
        jQuery('ul li:not(".active")').show();
      } else {
        jQuery('ul li').removeClass('active');
        jQuery(this).addClass('active');
        jQuery('ul li:not(".active")').hide();
      }
    });

Answer 3

只需使用addClass，removeClass和show() / hide()

＆＃13;

$('li').click(function() {
  if ($(this).hasClass('active')) {
    $('li').show();
    $(this).removeClass('active');
  } else {
    $('li').hide();
    $(this).addClass('active').show();
  }
});

＆＃13;

li {
  cursor: pointer;
}

.active {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ol>

＆＃13;

jQuery隐藏所有没有类的元素

3 个答案: