在菜单元素上切换 class 时。我怎样才能做到 class 在以前切换的元素上被删除？

Question

我有这个菜单，其中有不同的子菜单 <ul>。单击子菜单时，.active class 将切换并显示子菜单。但是，当我单击不同的子菜单时，所需的行为是 .active class 将从上一个子菜单中删除并应用于新子菜单。然而，现在显然发生的是新的子菜单也将获得 .active class 并且两个菜单将同时打开，这不是我想要的。

什么是确保在我单击下一个菜单项时删除 .active class 的简单方法？

这是我当前的代码

$(".menu nav ul li > ul.subnav li").on("click", function (_event) {
  $(this).children("ul.subnav").toggleClass("active");
});

Answer 1

从其他活动元素中删除 .active 并为该元素添加它。

$(".menu nav ul li > ul.subnav li").on("click", function (_event) {
  $(".menu nav ul li > ul.subnav li ul.subnav.active").removeClass("active");
  $(this).children("ul.subnav").addClass("active");
});

在菜单元素上切换 class 时。我怎样才能做到 class 在以前切换的元素上被删除？

When toggling a class on a menu element. How can I make it so that class gets removed on previously toggled elements?

javascript

class