引导关闭响应菜单“点击” [英] Bootstrap close responsive menu "on click"

问题描述

在产品上点击我向上滑动一个白色的div（如附件中所示）。当在响应（移动和平板电脑），我想自动关闭响应的navbar，只显示白色的条。

我试过：

  $（'。btn-navbar' ）.click（）; 
  

也尝试过：

  $（'。nav-collapse'）。toggle（）; 
  

它可以工作。然而在桌面大小，它也被调用，并做一些时髦的菜单，它收缩一秒钟。

有任何想法吗？

解决方案

p>

html中的菜单：

 < div id =nav-main class =nav-collapse collapse> 
< ul class =nav> 
< li> 
< a href ='＃somewhere'>某处< / a> 
< / li> 
< / ul> 
< / div> 
 

在导航到折叠菜单中的所有元素上绑定点击事件（Bootstrap collapse plugin）：

  $（function（）{
 var navMain = $（＃nav-main）; 
 navMain。 on（click，a，null，function（）{
 navMain.collapse（'hide'）; 
}）; 
} 
  




On "PRODUCTS" click I slide up a white div (as seen in attached). When in responsive (mobile and tablet), I would like to automaticly close the responsive navbar and only show the white bar.

I tried:

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

also tried:

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

And it does work. However in desktop size, it is also called and does something funky to the menu where it shrinks for a second.

Any ideas?

解决方案

I've got it to work with animation!

Menu in html:

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

Binding click event on all a elements in navigation to collapse menu (Bootstrap collapse plugin):

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

这篇关于引导关闭响应菜单“点击”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！