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

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>

如果您正在使用该组件，则可以使用 jQuerycollapse创建一个文档处理程序。click

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

Bootply 上的演示

Answer 2

我将“折叠”应用于页面上的几个 div，一旦其中一个扩展了其类更改为“in”而不是“collapse”，因此使用

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

为我工作。

Answer 3

只需添加此脚本行即可。

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