Jquery：toggleclass 但不在这个孩子身上。我该怎么做？

Question

我正在做一个简单的响应式多级菜单，我正在使用 toggleclass 打开子菜单。

事情是我想要的，当我点击菜单打开一个子菜单时，如果有任何其他子菜单打开，它们将关闭除了我刚刚打开的子菜单并且能够关闭这个通过单击其父菜单来创建子菜单。

我目前使用这个代码：

$(document).ready(function(){
$(".menu > li").click(function(){
    $(".submenu.show-menu").toggleClass("show-menu"), 
    $(this).children(".submenu").toggleClass("show-menu")
    ;
});
});

JSFiddle: https://jsfiddle.net/g7d3wmnc/ 尝试通过单击菜单打开子菜单。然后单击另一个菜单以打开其子菜单。查看您打开的上一个子菜单如何关闭。那是正确的。 现在尝试通过单击菜单来关闭您刚刚打开的子菜单。你会发现它不起作用。这就是问题所在。

这段代码的问题是，如果我打开一个子菜单，然后打开另一个子菜单，我打开的前一个子菜单将关闭。这样可行。 但是我无法关闭刚刚打开的子菜单，除非我打开另一个子菜单等等。

我认为是因为这条线：

$(".submenu.show-menu").toggleClass("show-menu"), 

此代码将看到我打开的当前子菜单具有类 show-menu 并将继续关闭该类，并且由于子菜单不再具有该类，下一行代码将继续打开该类，应该的。

那么，我该如何防止这种情况发生呢？我想如果我可以排除我单击的第一行代码的菜单的子菜单，那么它会按我的意愿工作，但我不知道该怎么做。我对 Jquery 很陌生。

我试过了：

$(".submenu.show-menu").not(this).toggleClass("show-menu")
$(".submenu.show-menu").not(this).children(".submenu").toggleClass("show-menu")

这是我正在尝试的网站： http://etrostruewowdesigncomplete2.esy.es/phpBB3/index.php?sid=2ae138c61784f734c9d98c0944359e42

只有在窗口大小低于 999 像素时才能看到响应式菜单，并且您必须单击/点击放大镜才能打开它（主题仍未完成）

Answer 1

在您使用的代码中

$(".submenu.show-menu").not(this).toggleClass("show-menu");

选择除活动元素以外的元素 showMenu。这是错误的，因为在这种情况下 this 指的是 span 元素。这是一个工作演示。

https://jsfiddle.net/8fx2u56w/

但我猜你希望有像 https://jsfiddle.net/6Lu8ajp2/ 这样的解决方案

Answer 2

那里。

这个 sn-p 应该更适合你：

$(document).ready(function(){
  $(".menu > li").click(function(){
    $(".submenu").removeClass("show-menu");
    $(this).children(".submenu").toggleClass("show-menu");
    ;
  });
});