Question

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

在桌面上，它运行正常。

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

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

我在nav-collapse元素上单击li时尝试折叠（'hide'），但它在下拉菜单中隐藏了其他li元素。

$（'。nav-collapse＆gt; li'）。点击（功能（e）
$（本）.collapse（ '隐藏'）

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

感谢。

Answer 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。

Answer 2

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

data-toggle =“collapse”data-target =“＃navbar”

Answer 3

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

如果您正在使用CDN或者只是不想编辑/重新编译 bootstrap-dropdown.js ，您只需将以下变通方法添加到您的页面，然后在bootstrap之后加载：< / p>

$('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'

Bootstrap nav-collapse隐藏在单页面应用中

3 个答案: