Bootstrap关闭响应式菜单“单击”

Question

在“产品”上，点击我将白色div向上滑动（如附件所示）。在响应式（移动设备和平板电脑）中，我想自动关闭响应式导航栏，仅显示白色栏。我试过了：$('.btn-navbar').click();  还尝试了：$('.nav-collapse').toggle();它确实有效。但是，在桌面大小上，它也被称为“菜单”，并在菜单上缩小了一秒钟。有任何想法吗？

Answer 1

我已将其与动画配合使用！

HTML中的菜单：

<div id="nav-main" class="nav-collapse collapse">

     <ul class="nav">

         <li>

             <a href='#somewhere'>Somewhere</a>

         </li>

     </ul>

 </div>

将导航中所有元素上的click事件绑定到折叠菜单（Bootstrap折叠插件）：

 $(function(){ 

     var navMain = $("#nav-main");

     navMain.on("click", "a", null, function () {

         navMain.collapse('hide');

     });

 });

编辑 为了使其更通用，我们可以使用以下代码片段

 $(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');

     });

 });