隐藏“汉堡”菜单上的所有可折叠 div 点击

Question

我有一个 Bootstrap 导航栏。 点击汉堡图标将打开一个菜单。 其中一个菜单项是另一个可折叠 div 的按钮。 我将此添加到此按钮：

$('.nav a').on('click', function(){
     $(".navbar-toggle").click() 
});

这将关闭导航栏菜单并显示另一个 div。

我想要的是再次点击汉堡图标将关闭新的 div 并且不会打开菜单。

基本上需要的是导航栏切换来关闭所有可折叠的 div，并且只有在没有任何其他 div 打开时才会打开菜单。

这是我的例子：http://www.bootply.com/FqZYHFSWrh

向下滚动以获得 770 像素的页面宽度 点击登录，你会看到菜单消失了。 接下来单击我要关闭登录容器的汉堡图标。 第二次单击（在登录容器关闭后）我想再次打开菜单。

Answer 1

您可以添加一个事件处理程序，例如：

$('button.navbar-toggle').on('click', function(event){
  if ($('.login-collapse').hasClass('in')) {
    event.stopPropagation();
    $('.login-collapse').collapse('hide');
  }
});