84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
http://www.webei.cn/这个网站在手机屏幕大小时,点击菜单项会出现下拉菜单,再次点击菜单项时会关闭下拉菜单。那如果目前下拉菜单是展开的,我想实现点击非菜单页面内容时,将下拉菜单关闭如何实现
欢迎选择我的课程,让我们一起见证您的进步~~
点击菜单时候给菜单加个clicked标记,body监听到click事件时关闭菜单并且清除菜单按钮的clicked标记
$(document).bind("click",function(e){ var target = $(e.target); if(target.closest(".menu").length == 0){//menu:菜单最子层class $(".header-menu").hide(); } }
$(document).bind('click', function(e) { var e = e || window.event; var elem = e.target || e.srcElement; while (elem) { //循环判断至跟节点,防止点击的是p子元素 if (elem.id && elem.id == 'menu') { return; } elem = elem.parentNode; } //点击的不是p或其子元素 $('.menuList,.overlay').hide(); });
其实我的理解就是一个元素获取的问题,你给菜单按钮绑定了一个下拉显示的事件,给除去它之外的元素一个关闭下拉菜单的事件绑定就可以了。我看楼主的项目,下拉菜单是一个模态框吧?给他的外层容器元素一个点击关闭事件就是你想要的了
在你html页面最下面加上下面的代码,测试可以
<script> document.body.onclick=function(){ $('.navbar-collapse').collapse('hide') } </script>
$(document).on('click', function(e){ var $el = $('.navbar-collapse'); if ($el[0] !== e.target && !$.contains($el[0], e.target)) { $el.hide(); } });
$("body").click(function(){
菜单隐藏; return flase; //用来清除冒泡
})
点击菜单时候给菜单加个clicked标记,body监听到click事件时关闭菜单并且清除菜单按钮的clicked标记
其实我的理解就是一个元素获取的问题,你给菜单按钮绑定了一个下拉显示的事件,给除去它之外的元素一个关闭下拉菜单的事件绑定就可以了。我看楼主的项目,下拉菜单是一个模态框吧?给他的外层容器元素一个点击关闭事件就是你想要的了
在你html页面最下面加上下面的代码,测试可以
$("body").click(function(){
})