1

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

在桌面上，它工作正常。

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

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

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

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

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

谢谢。

4

3 回答 3

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。

于 2012-11-05T07:53:35.113 回答
1

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

数据切换=“折叠”数据目标=“#navbar”

于 2015-04-02T04:55:50.057 回答
0

Twitter Bootstrap 的 Dropdown 插件（参见问题 #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，那么您可以在第 145 行对bootstrap-dropdown.js进行以下编辑：

'.dropdown'

应该改为

'.dropdown form'
于 2012-08-31T17:50:06.093 回答