javascript - jQuery 隐藏所有没有类的元素

标签 javascript jquery css if-statement

我有一些简单的 jQuery,它可以在单击后将类“active”切换为 li:

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

然后我想要发生的是隐藏列表中的所有其他 li(显示:无),然后当您再次单击事件 li 时,它会删除事件类,但也将所有其他 li 设置为再次可见。这就是我努力实现的目标。

我已经尝试在点击函数中使用 if 语句来检查“事件”类是否存在以及是否将所有 li 设置为隐藏,如果不存在则设置 css 以再次显示它们,但是这是行不通的。

编辑:

tilz0R 的答案几乎就是我要找的,我只是稍微修改一下以适应我的需要。

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

隐藏类只有 display: none,所以除了被点击的那个之外,所有其他的 li 都被隐藏了,然后所有的都在第二次点击事件 li 时再次显示。

最佳答案

您必须找到当前 li 元素的 sibling 。

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

关于javascript - jQuery 隐藏所有没有类的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45279362/

相关文章:

javascript - 使用 Angular 6 和 RxJs 6 显示时钟

javascript - 移动对象 Three.js

css - 如何使用 CSS 旋转 + 翻转元素

javascript - Protractor 在忽略同步期间等待,浏览器 implicitTimeout 与 browser.wait 超时

javascript - 为所有浏览器制作主页

javascript - 返回上一页相同的滚动位置,并使用 jquery 在页面上延迟加载图像

javascript - Google Apps 脚本上的 JQuery 日期选择器和选择菜单

javascript - 在 iframe 父窗口中触发点击事件

html - 移动网络应用程序设计 - 仍然建议使用图像 Sprite 吗?

javascript - 如何在 Bootstrap 中设置多个标签导航