Bootstrap 3在菜单项上隐藏下拉菜单单击
Bootstrap 3在菜单项上隐藏下拉菜单单击
提问于 2013-08-10 02:57:16
。我有一个基本的Bootstrap 3响应式导航，如下所示：
<div id="navbar" class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<a id="navbar-toggle" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Title Title Title</a>
<div id="nav-collapse" class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#option1">Option 1</a></li>
<li><a href="#option2">Option 2</a></li>
<li><a href="#option3">Option 3</a></li>
</ul>
</div>
</div>
</div>导航项目链接到页面上的部分，而不是不同的页面，所以我需要下拉菜单来隐藏点击。
每当我尝试使用jQuery手动切换下拉菜单时，都会扰乱下拉切换按钮未来的功能：
$("#navbar li a").click(function(event) {
// check if window is small enough so dropdown is created
$("#navbar-toggle").is(":visible")
$("#nav-collapse").toggle();
});有没有更好的解决方法？
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-10-25 14:14:40
如果您想在不使用JavaScript的情况下完成此操作，您可以简单地向每个列表项添加数据目标和数据切换，如下所示：
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option1">Option 1</a></li>
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option2">Option 2</a></li>
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option3">Option 3</a></li>对于导航栏，只有在有切换按钮的情况下，这才能在移动视图模式下工作。当导航栏显示时，会发生奇怪的事情(切换按钮没有显示)。
Stack Overflow用户
发布于 2013-08-10 03:06:08
更改此设置：
$(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");
});
});Stack Overflow用户
发布于 2013-12-08 06:25:39
我不知道为什么在折叠导航栏的菜单下拉菜单中点击/点击菜单项不能自动切换Bootstrap中的菜单。可能有一种更优雅的方法来做这件事，但是，下面是我如何修复它的(使用Bootstrap 3.0.3)：
<li class="visible-xs">
<a href="#" data-toggle="collapse" data-target=".navbar-collapse">Link</a>
</li>
<li class="hidden-xs">
<a href="#">Link</a>
</li>基本上，有两个版本的链接，一个显示菜单切换(浏览器宽度<768px)将切换导航栏菜单，另一个不折叠它(浏览器宽度>768px)。如果不添加第二种类型，当菜单不存在时，当尝试切换菜单时，它将显示一个奇怪幻影动画水平滚动条。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18153745
复制相关文章
相似问题