Bootstrap nav-折叠隐藏在单页应用程序中
我目前正在为我的单页应用程序使用2.x Bootstrap版本。
在桌面上，它工作得很好。
然而，在我的ipad和手机上，它显示了一个导航按钮，这是很好的。但是，当我单击显示的下拉项中的一个项时，它不会自动关闭。
因为它是一个单页面的应用程序，我发现再次点击它来隐藏查看内容是很烦人的。
我尝试过在单击导航-折叠元素时折叠(‘hide’)，但它在下拉菜单中隐藏了其他li元素。
$(‘..nav折叠>li’).click(函数(E)
$(.collapse)隐藏(‘hide’)
当一个链接被点击时，最好的隐藏方式是什么？
谢谢。
回答 3
Stack Overflow用户
发布于 2012-09-01 01:50:06
Twitter Bootstrap的下拉插件(参见Issue #4497)中存在一个bug，该插件在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'Stack Overflow用户
发布于 2012-11-05 15:53:35
我也遇到了同样的问题，并通过向导航项目链接本身添加数据属性(修改为仅折叠打开的.nav- collapse )来解决该问题。
注意，链接上的data-target是“.nav-cliumse.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的折叠声明。
Stack Overflow用户
发布于 2015-04-02 12:55:50
在Bootrap 3.3.4中，您可以将以下内容添加到锚点标记以自动关闭导航。
数据切换=“折叠”数据-目标=“#navbar”
https://stackoverflow.com/questions/12220206
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号