我的MegaMenu有点问题,当我打开一个子菜单(点击主菜单的一个项目)我希望当我点击文档正文的任何地方或如果我选择其他菜单项时,子菜单消失,前一个子菜单有关闭,如果我点击该子菜单('ul'),或子菜单上的一个特定项目,它就像我想要的那样(它关闭),但如果我点击其他菜单项,前一个子菜单会保持打开状态,创建子菜单层我必须点击让它们消失(或点击使它们出现的主菜单项目)我不确定我是否清楚,函数JS即时使用:
$(".menu > ul > li").click(function(e) {
if ($(window).width() > 943) {
$(this).children('ul').fadeToggle(15);
$(this).children('ul').toggleClass('center');
e.preventDefault();
}
});
所以我的代码有一个小提琴:
休息,我相信我明白了这个问题。
首先,您必须检查要打开的元素是否已打开。如果打开,你将关闭,否则你将打开。
$(".menu > ul > li").click(function(e) {
if ($(window).width() > 943) {
if ($(this).children('.menu-list').is(":visible")){
$(this).children('.menu-list').fadeToggle(15);
$(this).children('.menu-list').toggleClass('center');
e.preventDefault();
} else {
$('.menu-list').hide();
$('.menu-list').removeClass('center');
$(this).children('.menu-list').fadeToggle(15);
$(this).children('.menu-list').toggleClass('center');
e.preventDefault();
}
}
});
然后,您需要另一个函数来验证用户是否在另一个不是菜单的位置单击以关闭子菜单。
$("body").click(function(e) {
var target = e.target;
if (target.className.indexOf("menu-button") == -1 && target.offsetParent.className.indexOf("menu-button") == -1 ) {
$('.menu-list').hide();
$('.menu-list').removeClass('center');
return;
}
});
看看这有助于你:https://codepen.io/beduardo/pen/zReyjj
提示:我建议避免使用,只使用标记来引用js中的元素。这可能是将来的问题。
谢谢我的朋友Bruno Eduardo,我相信你懂葡萄牙语! Obrigado amigo !!只有一个小错误,它只有在你点击按钮时才有效,如果点击图像它不起作用,修复你需要为链接中的每个标签添加菜单按钮。例如:
<a role="button" class="button button4 **menu-button**"><i class="icon-crm fs1 icon **menu-button**"></i><span class="button-text rowcenter **menu-button**">{{'MenuItem1' | translate}}</span></a>
谢谢你,朋友!
是的,我理解葡萄牙语=)。这种方法很好,另一种方法是改进功能,验证用户是否在另一个地方点击。
if (target.className.indexOf("menu-button") == -1 && target.offsetParent.className.indexOf("menu-button") == -1 )
随意选择更好的=)