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

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

Answer 1

在您正在使用的代码中

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

选择除活动元素之外的元素showMenu。这是错误的，因为在此上下文中 this 引用了span元素。这是一个工作演示。

https://jsfiddle.net/8fx2u56w/

但我想你希望找到像https://jsfiddle.net/6Lu8ajp2/

这样的解决方案

Answer 2

那里。

此代码段应该更适合您：

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