我正在做一个简单的响应多层次菜单,我使用切换类打开子菜单。
的问题是,当我单击菜单打开一个子菜单时,如果有其他子菜单打开,它们将关闭,除了我刚刚打开的子菜单,并且能够通过单击它的菜单父菜单关闭该子菜单。
我目前使用以下代码:
$(document).ready(function(){
$(".menu > li").click(function(){
$(".submenu.show-menu").toggleClass("show-menu"),
$(this).children(".submenu").toggleClass("show-menu")
;
});
});JSFiddle: https://jsfiddle.net/g7d3wmnc/尝试通过单击菜单打开子菜单。然后单击另一个菜单来打开它的子菜单。查看您之前打开的子菜单是如何关闭的。这是正确的做法。现在尝试通过单击它的菜单关闭您刚刚打开的子菜单。你会发现它不起作用。这就是问题所在。
这段代码的问题是,如果我打开一个子菜单,然后打开另一个子菜单,我打开的前一个子菜单就会关闭。这是可行的。,但是我不能关闭我刚刚打开的子菜单,除非我打开另一个子菜单,等等,。
I推测这是因为这一行:
$(".submenu.show-menu").toggleClass("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时,您才能看到响应菜单,并且必须单击/点击放大镜才能打开它(主题仍未完成)
发布于 2015-03-29 11:08:06
在您正在使用的代码中
$(".submenu.show-menu").not(this).toggleClass("show-menu");若要选择活动元素以外的元素showMenu,请执行以下操作。这是错误的,因为在此上下文中的将返回span元素。这是一个工作演示。
https://jsfiddle.net/8fx2u56w/
但我想你是希望找到像https://jsfiddle.net/6Lu8ajp2/这样的解决方案
发布于 2015-03-29 06:01:07
那里。
这个片段应该更适合您:
$(document).ready(function(){
$(".menu > li").click(function(){
$(".submenu").removeClass("show-menu");
$(this).children(".submenu").toggleClass("show-menu");
;
});
});https://stackoverflow.com/questions/29325640
复制相似问题