菜单关闭点击正文页
menu close on click on body page
我创建了一个下拉菜单,点击导航按钮即可打开。但当鼠标点击页面主体时,我找不到关闭下拉菜单的方法。
我你能弄清楚的,请帮我
(function(){
var bodyEl = $('body'),
navToggleBtn= bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e){
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
活动导航在css中创建,并与菜单和正文链接
您可以将点击事件绑定到主体,然后使用event.target
检查事件是否是从特定元素生成的
var bodyEl = $('body');
navToggleBtn = bodyEl.find('.nav-toggle-btn');
$('body').on('click', function (e) {
if ($(e.target).hasClass("nav-toggle-btn")) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
e.stopPropagation();
}
else
{
//close the menu here
}
});
我不知道这是否是正确的解决方案,但我会添加一个覆盖整个页面的div元素。
菜单在div的顶部,但其余部分在下面。如果单击div,它将关闭自身和菜单。
所以基本上,它是一个灯箱(用于显示图像),但没有阴影。或者width是一个阴影,因为它会让你的菜单更加突出,并且符合禁用点击身体特定元素的期望。
拥有一个额外的元素而不仅仅是捕捉主体上主级别上的点击的另一个优点是,它不会干扰主体本身上的其他事件处理程序,这些事件处理程序可能会捕捉点击,因此对于只想关闭菜单的人来说会产生意想不到的结果。
下面是一个粗略的例子:
$('header > ul > li').on('click', function() {
// Deactive all menu items
$('ul.active').removeClass('active');
// Activate the one clicked.
$(this).closest('li').addClass('active');
// If there is no lightbox setup a new one.
var box = $('.lightbox');
if (box.length == 0) {
// It's just a div with a class.
$('<div>')
.prependTo($('body'))
.addClass('lightbox')
.on('click', function() {
// Lightbox clicked? Remove it, and deactivate the menu.
$('.lightbox').remove();
$('li.active').removeClass('active');
});
}
});
li {
padding: 1em;
}
header > ul > li {
display: inline-block;
vertical-align: top;
position: relative;
background-color: #eee;
}
li > ul {
display: none;
background-color: #ddd;
position: absolute;
top: 100%;
left: 0;
}
li.active > ul {
display: block;
}
.lightbox {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0, 0.2); /* Just for show */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
Header, page title
<ul>
<li>Main
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li>Other</li>
<li>About</li>
</ul>
</header>
<section>
Main content
</section>
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- angular的下拉菜单
- 使用JQuery的动态上下文菜单
- JQuery在单击正文时隐藏上下文菜单
- 阻止在单击和关闭覆盖菜单css时滚动正文
- jQuery/JS正在获取导航菜单,以便在单击正文时隐藏
- 关闭菜单,单击带有事件侦听器和父节点的正文
- 如何垂直展开网页'打开菜单时的正文
- 显示和隐藏菜单 当您单击正文时
- 画布外导航:如何在不覆盖正文的情况下,在一级菜单的顶部滑入二级菜单
- 菜单关闭点击正文页
- Mobile Safari可在菜单打开时阻止正文滚动
- 在菜单上单击添加noscroll类到正文
- Uib下拉菜单在HTML视图的正文中不起作用
- 如何在Bootstrap中将单个下拉菜单附加到正文
- 通过单击正文关闭侧菜单
- 如何在移动设备上创建模式导航菜单并防止正文滚动
- 在正文单击时隐藏子菜单
- 单击菜单项或其他元素将改变正文背景图像