我有一个带有2个可折叠切换按钮的bootstrap导航栏。在小屏幕上,当点击第一个时,它显示/隐藏无序列表/下拉菜单;当点击第二个时,它显示/隐藏一个搜索框&提交按钮。 This JSFiddle显示了会发生什么。
<!-- the HTML -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- navbar-header with 2 collapse buttons & the navbar-brand -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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="#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> <a class="navbar-brand" href="#">Brand</a>
</div>
<!-- FIRST COLLAPSIBLE DIV -->
<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>
</div><!-- end of first collapsed div -->
<!-- SECOND COLLAPSIBLE DIV -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<form class="navbar-form navbar-right" 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>
</div><!-- end of second collapsed div -->
</div><!-- end of container -->
</nav>
$('.navbar').on('show.bs.collapse', function () {
var actives = $(this).find('.collapse.in'),
hasData;
if (actives && actives.length) {
hasData = actives.data('collapse')
if (hasData && hasData.transitioning) return
actives.collapse('hide')
hasData || actives.data('collapse', null)
}
});
#bs-example-navbar-collapse-1 {
float: left;
}
#bs-example-navbar-collapse-2 {
float: right;
}
这里的代码实际上存在问题(尽管这不是主要问题):如果你减少浏览器的宽度和单击任一切换按钮,您将看到显示的下拉菜单(也称为“未折叠菜单”)仅占用屏幕的一半。那么,我怎样才能(a)定位这些下拉元素&amp; (b)为它们分配适当的CSS,使它们跨越整个宽度?
主要问题有点棘手。在this页面上,您会看到我尝试将小提琴中的解决方案应用于实际网站。在这种情况下,你会看到,如果你减少屏幕宽度&amp;单击两个切换按钮,您可以立即在屏幕上同时获得两个未折叠的菜单。绝对不是你想要的!
这里的失败似乎是在JavaScript / jQuery代码中(见上文和小提琴),据说,如果[已经有未崩溃的菜单可见]那么[在拆开另一个之前将它们折叠]。我认为。对于passpaeds.com/y/网站,我稍微修改了这段代码,以便向控制台显示actives.length
的值,因为我认为这是它倒下的地方。如果你点击一个firebug的控制台,然后点击www.passpaeds.com/y/网站上的两个切换按钮 - 当屏幕宽度足够小以触发它们的外观时 - 你可能能够发现我不做的事情。