Bootstrap nav-collapse 隐藏在单页应用程序中答案

【问题标题】：Bootstrap nav-collapse hide in single page appBootstrap nav-collapse 隐藏在单页应用程序中
【发布时间】：2015-04-02 12:55:50
【问题描述】：

我目前正在为我的单页应用程序使用 2.x Bootstrap 版本。

在桌面上，它工作正常。

但是在我的 ipad 和手机上，它显示了一个很好的导航按钮。但是，当我单击显示的下拉项目中的项目时，它不会自动关闭。

因为它是一个单页应用程序，我觉得再次单击它以隐藏以查看内容很烦人。

当在 nav-collapse 元素上单击 li 时，我尝试了 collapse('hide')，但它隐藏了下拉菜单中的其他 li 元素。

$('.nav-collapse > li').click(function(e)
$(this).collapse('隐藏')

点击链接时最好的隐藏方式是什么？

谢谢。

【问题讨论】：

嗨，cloudpre，我遇到了这个问题并找到了一个很好的解决方案！见下文。

标签： twitter-bootstrap

【解决方案1】：

我也遇到了同样的问题，并通过向导航项链接本身添加数据属性（修改为仅折叠打开的 .nav-collapse）来解决它。

请注意，链接上的数据目标是“.nav-collapse.in”，它只选择展开的导航，因此仅作为关闭。

例如：

<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
    <!-- Collapse icon goes here -->
</a>

<div class="nav-collapse">
    <ul class="nav">
        <li>
            <a href="#" data-toggle="collapse" data-target=".nav-collapse.in">Link</a>
        </li>
    </ul>
</div>

这仅在 Mac OSX Chrome 上的 Bootstrap 2.2.1 中进行了测试。虽然它是重复的并且不是 DRY，但它确实将折叠声明保留在 HTML 中。

【讨论】：

【解决方案2】：

在 Bootrap 3.3.4 中，您可以将以下内容添加到锚标记以自动关闭导航。

data-toggle="collapse" data-target="#navbar"

【讨论】：

【解决方案3】：

Twitter Bootstrap 的下拉插件（参见 Issue #4497）中存在一个错误，该错误是在 2.1.0 中引入的，会无意中阻止下拉菜单项上的点击事件。它应该在 2.1.1 中修复。

如果您正在使用 CDN 或者只是不想编辑/重新编译 bootstrap-dropdown.js，您可以将以下解决方法添加到您的页面，在引导后加载它：

$('body')
  .off('click.dropdown touchstart.dropdown.data-api', '.dropdown')
  .on('click.dropdown touchstart.dropdown.data-api'
    , '.dropdown form'
    , function (e) { e.stopPropagation() })

如果您正在托管自己的代码，并且可以轻松构建 bootstrap.min.js，那么您可以对 bootstrap-dropdown.js 进行以下编辑第 145 行：

'.dropdown'

应该改为

'.dropdown form'

【讨论】：

我知道这个错误，因为它也影响了我们。但是，我使用的是旧版本。问题更多是关于在单页应用程序上检查链接后隐藏 div 的各种方法。