单击#mega-dropdown时会启动大型菜单和叠加层。 单击巨型菜单中的空白时,隐藏叠加层。我想阻止这个。
这是我的简化标记:
<ul class="nav navbar-nav">
<!-- Click Here -->
<li class="dropdown mega-dropdown" id="mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="category">Mega Menu</a>
<!-- Show this mega menu -->
<ul class="dropdown-menu mega-dropdown-menu row" id="mega-dropdown-menu">
<li>Mega Menu Content</li>
</ul>
</li>
</ul>
这是我目前的JS:
$(document).ready(function(){
// Activate Overlay when Mega Menu is Open
$(document).on('click', function(){
var clicked = $(e.target);
if (clicked.is('.mega-dropdown-menu') || clicked.parents().is('.mega-dropdown-menu')) {
return;
} else {
$('#overlay').removeClass('open');
}
});
$('#mega-dropdown').on('click', function(){
if($('#mega-dropdown-menu').is(":visible") ) {
$('#overlay').removeClass('open');
} else {
$('#overlay').addClass('open');
}
});
});
// Prevent the menu from closing if user clicks inside the contianer
jQuery(document).on('click', '#mega-dropdown', function(e) {
e.stopPropagation();
})
答案 0 :(得分:0)
叠加层消失的原因是因为你正在关闭它。巨型下拉点击处理程序应如下所示:
$('#mega-dropdown').on('click', function(e){
if(!$('#mega-dropdown-menu').is(":visible") ) {
$('#overlay').addClass('open');
}
});