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

Question

我正在开发一个 Bootstrap 模板，当有人单击菜单外部时，我需要隐藏/关闭打开的折叠菜单。这是菜单的图像 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