Css bootstrap 关闭响应菜单点击

发布于06月26日

在"产品"上，单击我向上滑动一个白色分区(如附件所示).在responsive(手机和平板电脑)中，我想自动关闭responsive导航栏，只显示白色栏.

我试过了:

$('.btn-navbar').click();

还try 了:

$('.nav-collapse').toggle();

而且它确实起作用了.然而，在桌面大小上，它也被称为，并在菜单上做了一些时髦的事情，它会缩小一秒钟.

有什么 idea 吗？

在此处输入图像描述

推荐答案

我已经把它用在动画上了！

html格式的菜单:

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

导航到折叠菜单( bootstrap 折叠插件)中所有a元素上的绑定单击事件:

 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });

EDIT个为了使它更通用，我们可以使用以下代码片段

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });