如何隐藏单击页面上其他位置后打开的折叠菜单

Question

我正在处理一个引导程序模板，当有人在菜单外单击时，我需要隐藏/关闭打开的折叠菜单。这里是菜单http://dev.flutechs.com/menu.png的图像

谢谢

Answer 1

这取决于“折叠菜单”是如何创建的。

如果您使用标准的Bootstrap下拉菜单，则当单击文档中的其他位置时，它将自动关闭...

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>

如果您使用的是collapse组件，则可以使用jQuery创建文档click处理程序。

$(document).on('click',function(){
    $('.collapse').collapse('hide');
})

Demo on Bootply

Answer 2

我在我的页面上应用了几个div's‘，一旦其中一个div展开，它的类就变成了'in’，而不是‘class’，所以使用

$(document).on('click',function(){
    $('.in').collapse('hide'); //in instead of collapse
});

对我很管用。

Answer 3

只需添加此脚本行，就可以了。

 $(document).ready(function(){
    $('.dropdown-toggle').dropdown();
});