Twitter bootstrap 引导导航折叠隐藏在单页应用程序中

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

在桌面上，它可以正常工作

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

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

我在单击导航折叠元素时尝试了折叠（“隐藏”），但它在下拉菜单中隐藏了其他li元素

$（'.nav collapse>li'）。单击（函数（e）
$（this.collapse（'hide'））

单击链接时隐藏的最佳方式是什么

---

谢谢。

Twitter Bootstrap的下拉插件（请参阅）在2.1.0中引入了一个bug，它无意中阻止了下拉菜单项上的点击事件。应该在2.1.1中修复

如果您正在使用CDN，或者只是不想编辑/重新编译引导下拉列表.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，那么您可以对第145行的bootstrap dropdown.js进行以下编辑：

'.dropdown'

应改为

'.dropdown form'

---

我也遇到了同样的问题，通过向导航项链接本身添加数据属性（修改为仅折叠open.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中进行了测试。虽然它是重复的且不干燥，但它确实将折叠声明保留在HTML中。

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

---

data toggle=“collapse”data target=“#navbar”

我知道这个bug也影响了我们。但是，我使用的是旧版本。问题更多的是关于在单页应用程序上检查链接后隐藏div的各种方法。嗨，cloudpre，我遇到了这个问题并找到了一个很好的解决方案！请参见下文。