经常会遇到,菜单弹窗需要点击其他地方弹窗消失,下面是js实现代码

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">							<ul class="nav navbar-nav">
	<li class="active">
		<a href="/">首页<span class="caret"></span></a>
	</li>
							<li class="dropdown ">
		<a href="/jianjie.html" class="dropdown-toggle" data-toggle="dropdown" >
			  简介<span class="caret"></span></a>
		<ul class="dropdown-menu">
			 
			<li><a href="/szljj.html">世珠联简介</a></li>
			 
			<li><a href="/ldjg.html">领导机构</a></li>
			 
			<li><a href="/ljld.html">历届领导</a></li>
			 
			<li><a href="/cwlsh.html">常务理事会</a></li>
			 
			<li><a href="/lsh.html">理事会</a></li>
										</ul>
	</li>
							<li class="dropdown ">
		<a href="/news.html" class="dropdown-toggle" data-toggle="dropdown" >
			  新闻<span class="caret"></span></a>
		<ul class="dropdown-menu">
			 
			<li><a href="/xwjj.html">新闻聚焦</a></li>
			 
			<li><a href="/tzgg.html">通知公告</a></li>
										</ul>
	</li>
							<li class="dropdown ">
		<a href="/zhangcheng.html" class="dropdown-toggle" data-toggle="dropdown" >
			  章程<span class="caret"></span></a>
		<ul class="dropdown-menu">
			 
			<li><a href="/zc1.html">章程</a></li>
			 
			<li><a href="/zd.html">制度</a></li>
										</ul>
	</li>
							<li class="dropdown ">
		<a href="/member.html" class="dropdown-toggle" data-toggle="dropdown" >
			  会员<span class="caret"></span></a>
		<ul class="dropdown-menu">
			 
			<li><a href="/hydw.html">会员单位</a></li>
			 
			<li><a href="/hydti.html">会员动态</a></li>
			 
			<li><a href="/wyotg.html">我要投稿</a></li>
										</ul>
	</li>
							<li class="dropdown ">
		<a href="/feiyi.html" class="dropdown-toggle" data-toggle="dropdown" >
			  非遗<span class="caret"></span></a>
		<ul class="dropdown-menu">
			 
			<li><a href="/rlfy.html">人类非遗</a></li>
			 
			<li><a href="/fytpn.html">非遗图片</a></li>
			 
			<li><a href="/zyxz.html">资源下载</a></li>
										</ul>
	</li>
							<li class="dropdown ">
		<a href="/yanjiu.html" class="dropdown-toggle" data-toggle="dropdown" >
			  研究<span class="caret"></span></a>
		<ul class="dropdown-menu">
			 
			<li><a href="/ktyj.html">课题研究</a></li>
			 
			<li><a href="/xslt.html">学术论坛</a></li>
			 
			<li><a href="/qkdti.html">期刊动态</a></li>
			 
			<li><a href="/sjjoc.html">书籍教材</a></li>
										</ul>
	</li>
							<li class="dropdown ">
		<a href="/jianding.html" class="dropdown-toggle" data-toggle="dropdown" >
			  鉴定<span class="caret"></span></a>
		<ul class="dropdown-menu">
			 
			<li><a href="/jndff.html">鉴定方法</a></li>
			 
			<li><a href="/jndzs.html">鉴定证书</a></li>
			 
			<li><a href="/jndjg.html">鉴定结果</a></li>
										</ul>
	</li>
							<li class="dropdown ">
		<a href="/bisai.html" class="dropdown-toggle" data-toggle="dropdown" >
			  比赛<span class="caret"></span></a>
		<ul class="dropdown-menu">
			 
			<li><a href="/bsitz.html">比赛通知</a></li>
			 
			<li><a href="/bsibom.html">比赛报名</a></li>
			 
			<li><a href="/bsixw.html">比赛新闻</a></li>
			 
			<li><a href="/bsijg.html">比赛结果</a></li>
										</ul>
	</li>
							<li class="dropdown ">
		<a href="/lianxi.html" class="dropdown-toggle" data-toggle="dropdown" >
			  联系我们<span class="caret"></span></a>
		<ul class="dropdown-menu">
			 
			<li><a href="/rhbnf.html">入会办法</a></li>
			 
			<li><a href="/lxfs.html">联系方式</a></li>
			 
			<li><a href="/zixnly.html">在线留言</a></li>
										</ul>
	</li>
							<li class="hidden-md hidden-lg">
		<a href="/">English<span class="caret"></span></a>
	</li>
	</ul>
</div>
$(function() {
	$(document).bind("click", function(e) {
		var target = $(e.target);
		if (target.closest(".navbar-toggle,.caret").length == 0 ) {
			/*.closest()沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止,返回包含零个或一个元素的 jQuery 对象。*/
			$(".navbar-collapse").css('height','0');
			$(".navbar-collapse").removeClass('in')
		};
		e.stopPropagation();
	})
})

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注