Bootstrap 3菜单-两个折叠按钮-一次只有一个打开
Bootstrap 3 menu - two collapse buttons - only one open at a time
我正试图在bootstrap 3中制作菜单。当它缩小到移动尺寸时,我有两个折叠导航切换按钮。默认情况下,当一个打开时,它只是堆叠在另一个上面。我想要的是每次打开一个下拉菜单。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-search">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div id="test2" class="nav-search collapse">
<div class="search_box">
<ul class="nav navbar-nav">
<li><a href="#">message 1</a></li>
<li><a href="#">message 1</a></li>
<li><a href="#">message 1</a></li>
<li><a href="#">message 1</a></li>
</ul>
</div><!-- end search_box -->
</div><!--/.nav-search -->
</div><!-- /.container-fluid -->
</nav>
我搜索并发现了这个,,但这是为引导2:引导菜单-两个折叠按钮相互切换?意思是,一次只打开一个
我觉得我错过了一些容易的东西。下面是一个jsfiddle链接:http://jsfiddle.net/Bootstrap714/RfsS9/4/
您弄错了事件名称。你需要在on('show.bs.collapse'...
上调用它,而不仅仅是在on('show'...
上。
这里是一个固定的小提琴
找到了一种"hackish"的解决方案
如果,兄弟姐妹按钮,没有一个折叠类,点击它。
$('.navbar-toggle').on('click', function () {
if(!$(this).siblings('.navbar-toggle').hasClass('collapsed')) {
$(this).siblings('.navbar-toggle').click();
}
});
http://jsfiddle.net/t96Ry/相关文章:
- 使用 JavaScript 一次为一个元素设置多个属性
- 一次显示一个隐藏指令-AngularJS
- 一次显示一个指令AngularJS
- 复选框一次选中一个不在gridview中工作
- 复选框一次选中一个不起作用
- 什么'是从对象列表中一次编辑一个对象的正确Angular/Firebase方法
- Slding表单不会一次显示一个表单
- 重置功能,因此一次只有一个打开
- 如果只有一次有条件,如何执行
- 如何一次获取一个p元素的内容
- 如何在一次有条件的ng单击时执行多个调用
- jqueryhttp将数据发布到整个数组,一次发送一个
- 在angularjs中一次选择一个项目
- 希望文本一次附加一个字母(或按块)d3
- 一次滑动一个表行
- 我试图用jQuery让每个HTML5元素一次淡出一个
- HTML画布-使动画一次发生一个,而不是同时发生多个
- jQuery Tools 可滚动:屏幕上有 3 个项目,但一次滚动一个
- 有没有一种正确的方法可以确保一次只有一个用户使用REST+HTTP对对象进行更改
- 我有这三个函数,该怎么做呢在onload时一个接一个地调用它们在refresh时一次调用一个函数