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

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组件,则可以click使用jQuery 创建文档处理程序.

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

Bootply上的演示