jQuery/JS正在获取导航菜单,以便在单击正文时隐藏
jQuery/JS getting nav menu to hide when the body if clicked
当点击菜单本身以外的任何东西时,我试图让滑出导航菜单(menuRight)消失。
这是我的JS:
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
menuRight = document.getElementById( 'cbp-spmenu-s2' ),
menuTop = document.getElementById( 'cbp-spmenu-s3' ),
menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
// showLeft = document.getElementById( 'showLeft' ),
showRight = document.getElementById( 'showRight' ),
showTop = document.getElementById( 'showTop' ),
showBottom = document.getElementById( 'showBottom' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
var a=document.getElementsByClassName('showLeft');
for(var i=0;i<a.length;i++) {
a[i].onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeft' );
};
}
showLeft.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeft' );
};
showRight.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'showRight' );
};
showTop.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuTop, 'cbp-spmenu-open' );
disableOther( 'showTop' );
};
showBottom.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuBottom, 'cbp-spmenu-open' );
disableOther( 'showBottom' );
};
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'showRightPush' );
};
function disableOther( button ) {
if( button !== 'showLeft' ) {
classie.toggle( showLeft, 'disabled' );
}
if( button !== 'showRight' ) {
classie.toggle( showRight, 'disabled' );
}
if( button !== 'showTop' ) {
classie.toggle( showTop, 'disabled' );
}
if( button !== 'showBottom' ) {
classie.toggle( showBottom, 'disabled' );
}
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
if( button !== 'showRightPush' ) {
classie.toggle( showRightPush, 'disabled' );
}
}
这部分是我试图使用的JQuery代码(但不起作用)。
$(":not(#menuRight)").onclick = function() {
disableOther( 'showLeft' );
}
谢谢!
使用事件传播来监视文档上的点击事件(不在菜单中)。
$(document).on('click', function(event) {
if (!$(event.target).closest('#menucontainer').length) {
// Hide the menus.
}
});
相关文章:
- JQuery在单击正文时隐藏上下文菜单
- 在外部(正文)单击时关闭弹出窗口
- 阻止在单击和关闭覆盖菜单css时滚动正文
- HTML 框架 - 防止引导弹出窗口在用户单击正文时消失
- 单击标签后,使用Javascript更改正文CSS
- jQuery/JS正在获取导航菜单,以便在单击正文时隐藏
- 添加事件处理程序以获取按钮单击LeadPage,我可以在其中对正文进行编码
- 关闭菜单,单击带有事件侦听器和父节点的正文
- 引导模态在单击其正文时会触发其他模态
- 在图像单击时更改正文加载
- 将类添加到动态元素上的正文,在页面上的任意位置再次单击后删除
- 如何使用jQuery单击时更改正文元素的背景图像
- 在容器/正文单击时关闭引导下拉列表
- 隐藏在正文单击EXPT项目ID =某物
- javascript,用于在单击正文中的任何位置时隐藏
- 显示和隐藏菜单 当您单击正文时
- Javascript:单击正文中除其中一个元素外的任何位置
- 当鼠标单击正文中的任何位置时,页面向上滚动
- jQuery:在元素本身上单击正文时隐藏()框,但不是()
- 通过单击正文关闭侧菜单