jQuery 点击，添加 class 但如果 class 已经存在，也删除

Question

我有一个导航菜单，需要通过点击而不是悬停来触发。 单击链接时，将向父li添加一个.open class 。 如果该父级已经拥有.open class，那么它将被删除。 如果单击另一个链接，它也会被删除。 到目前为止，我可以在单击同级时添加 class 并在单击同级时将其删除，但在它已经.open时不会删除。

我尝试添加一个hasClass条件，但这也不起作用。 似乎每次单击它都会重新运行 function ，因此忽略 hasClass 条件。

任何人都可以提供帮助吗？ 我尝试toggleClass ，但没有奏效。

 $('li a').on('click', function() { $('li a').parent().removeClass('open'); $(this).parent().addClass('open'); });

 ul { list-style: none; } li { display: inline-block; padding: 10px; }.open { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 1</a> </li> </ul> </nav>

Answer 1

要执行您需要的操作，您可以在单击元素时在父li上使用toggleClass() 。 要从所有其他li元素中删除 class ，您可以使用removeClass()和not()来排除当前li 。 尝试这个：

 $('li a').on('click', function() { let $li = $(this).parent().toggleClass('open'); $('li').not($li).removeClass('open'); });

 ul { list-style: none; } li { display: inline-block; padding: 10px; }.open { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 1</a> </li> </ul> </nav>

Answer 2

您可以使用

1. jquery toggleClass() 在单击/取消单击同一链接时切换黄色突出显示（.open css 类）。
2. jquery 兄弟姐妹（）删除。在所有其他 li 项目上打开 class。

下面是demo的链接

https://jsfiddle.net/so1u8hq6/

 $('li a').on('click', function() { $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); });

 ul { list-style: none; } li { display: inline-block; padding: 10px; }.open { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li> </ul> </nav>

Answer 3

聚会迟到了，但是，在看到提供的答案和您使用的一些 CSS 之后，我不得不提出我的建议：

• 用户体验。 通常避免设置 LI 标签的样式，或者至少设置所需的display并继续。 直接为a标签设置样式（使用必要的填充等）。 您不仅会得到更少的 CSS 照顾，而且触摸交互区域更大。 如果它不是可交互的 UI 部分，则将其设置为黄色是没有意义的。 同样在 JS 中，您不再需要关心LI包装器，而只需关心实际A元素。
• 不要使用像$('li a')这样的常见选择器——它们可能会针对您应用中的任何LI→A 元素。 而是更具体并使用 Class ，例如： .tabs for parent UL 。 在 CSS 和 JS 中。
• 尝试使用事件委托（在 jQuey 中使用.on()方法）。 它不仅可以帮助您在需要的地方捕获Event.delegateTarget父UL ，还可以捕获this （单击的元素），但主要引用包含在公共父元素中a元素的所有“组” 。 这样，您可以在一个页面中拥有任意数量的.tabs 。 是的，多亏了事件委托，您甚至可以动态添加 LI 元素——您的 JS 仍将按预期工作。
• 由于您使用的是<a href="#">锚元素，而不是（更正确的） <button type="button>"元素，因此您还需要使用Event.preventDefault()以防止浏览器默认行为，那就是跟随锚点（滚动页面，导航等......）
• 当您想要定位并移除"open" class 时，请使用选择器"a.open" 。 通过仅使用"a" （或在此页面上的其他答案中 - "li" ），您将无用地触摸元素，试图删除首先不存在的 class。

最后，这是您的任务所需的 CSS 润饰和正确的 jQuery：

 $(".tabs").on("click", "a", function(ev) { ev.preventDefault(); $("a.open", ev.delegateTarget).not(this).removeClass("open"); $(this).toggleClass("open"); });

 .tabs { display: flex; list-style: none; padding: 0; } /* Style your Anchors, not the dummy LI wrappers */.tabs a { padding: 10px; }.tabs a.open { background-color: yellow; }

 <ul class="tabs"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

解释唯一复杂的行：

$(
  "a.open",             // Target just the ones (if any) of class "open"
  ev.delegateTarget     // inside the common ".tabs" ancestor
)
  .not(this)            // ... not the clicked element (since later we'll use .toggleClass on it)
  .removeClass("open"); // ... remove that class "open" 

rest 很容易解释。

进一步阅读：

• jQuery 事件委托
• jQuery event.delegateTarget
• Event.preventDefault

Answer 4

所以你只希望黄色背景作为用户交互的标志而不是显示背景颜色？ 您是否尝试过使用mousedown/mouseup函数而不是.on('click', function(){...} ？

我能够通过这种方法模拟颜色展示的点击事件：

 $('li a').mousedown(function() { $('li a').parent().removeClass('open'); $(this).parent().addClass('open'); }); $('li a').mouseup(function() { $('li a').parent().removeClass('open'); });

 ul { list-style: none; } li { display: inline-block; padding: 10px; }.open { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 1</a> </li> </ul> </nav>