Bootstrap 3 Hide菜单项上的下拉菜单单击
看看小提琴 。 我有一个基本的Bootstrap 3响应导航，如下所示：
导航项链接到页面上的部分，而不是不同的页面，所以我需要下拉隐藏点击。
每当我尝试使用jQuery手动切换下拉列表时，它会混淆下拉切换按钮的未来function：
$("#navbar li a").click(function(event) { // check if window is small enough so dropdown is created $("#navbar-toggle").is(":visible") $("#nav-collapse").toggle(); });
有更好的解决方案吗？
如果你想在没有JavaScript的情况下这样做，你可以简单地将数据目标和数据切换添加到每个列表项，如下所示：
Option 1 Option 2 Option 3
对于导航栏，当有切换按钮时，这实际上仅适用于移动视图模式。 暴露导航栏时会发生奇怪的事情（切换按钮未显示）。
改变这个：
$(document).ready(function () { $("#navbar li a").click(function(event) { // check if window is small enough so dropdown is created $("#navbar-toggle").is(":visible") $("#nav-collapse").toggle(); }); });
对此：
$(document).ready(function () { $("#navbar li a").click(function(event) { // check if window is small enough so dropdown is created $("#nav-collapse").removeClass("in").addClass("collapse"); }); });
见http://jsfiddle.net/fw7vh/4/
我不知道为什么点击/点击折叠导航栏菜单下拉列表中的菜单项不会自动切换Bootstrap中的菜单。 可能有更优雅的方式来做到这一点，但是，这是我如何修复它（使用Bootstrap 3.0.3）：
Link Link
基本上，链接有两个版本，每当显示菜单切换时（浏览器宽度<768px）将切换导航栏菜单，并且不会折叠它（浏览器宽度> 768px）。 如果你没有添加第二种类型，它会在尝试切换菜单时显示一个奇怪的幻影动画水平滚动条。
我是Bootstrap的新手，但是对上面的代码进行了一些改动后，它现在可以很好地工作了。 请记住，当您点击徽标时，下拉菜单也会关闭，这就是我为其添加了navbar-header的原因！
jQuery(document).ready(function () { jQuery(".nav a, .navbar-header a").click(function(event) { // check if window is small enough so dropdown is created jQuery(".navbar-collapse").removeClass("in").addClass("collapse"); }); });
使用Bootstrap 3.3.4我意识到我的旧方式退出工作。 更新为：
if ($('div.navbar-collapse').hasClass('in')) { $('button.navbar-toggle:visible').click(); }