经常会遇到,菜单弹窗需要点击其他地方弹窗消失,下面是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();
})
})