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

【问题标题】：How to hide a bootstrap opened collapsed menu after clicking elsewhere on page单击页面上的其他位置后如何隐藏引导打开的折叠菜单
【发布时间】：2013-06-04 13:37:48
【问题描述】：

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

谢谢

【问题讨论】：

标签： jquery twitter-bootstrap drop-down-menu

【解决方案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

【讨论】：

我正在将此代码用于nav-collapse，它具有哈希导航和页面链接，哈希有效但页面链接无效...您有什么建议？
@SaurabhLP 我认为 Skelly 的其他回答可能会对您有所帮助stackoverflow.com/a/16901585/446681
您真的认为聆听文档的每一次点击并每次都运行折叠脚本是个好主意吗？
问题是当有人点击菜单外时隐藏打开的折叠菜单。即使在菜单内单击，您的答案也会关闭可折叠项
不管怎样，这个问题是OBE。问题的参考链接已损坏，并且当在答案中说明的菜单外单击某些按钮时，引导菜单 aleady 确实会关闭。

【解决方案2】：

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

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

为我工作。

【讨论】：

【解决方案3】：

只需添加此脚本行即可。

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

【讨论】：

问题是当有人点击菜单外时隐藏打开的折叠菜单。即使在菜单内单击，您的答案也会关闭可折叠项
是上述问题的解决方案之一。如果切换下拉菜单未正确启动，它将无法正常工作，仅添加 HTML 并不能保证其正常工作。我不知道你为什么投反对票。