我是第一次使用Twitter Bootstrap。一切似乎都正常工作,除了我的顶部导航需要调整。
我们有一个菜单按钮,可以打开主导航下拉菜单。然后我们有一个搜索按钮,可以打开一个搜索表单下拉列表。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar menubutton" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="menu">Menu</span>
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-search"><img src="images/search_03.png">Search</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#">About Us</a></li>
<li><a href="#">Research & Innovation</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Responsibility</a></li>
<li class="subnav"><a href="#" >Careers</a></li>
<li class="subnav"><a href="#" >Newsroom</a></li>
<li class="subnav"><a href="#" >Contact Us</a></li>
<li class="navfoot">This is a mobile version of our website<br/>
<a href="#">View full site</a></li>
</ul>
</div><!--/.nav-collapse -->
<div class="nav-search collapse">
<div class="search_box">
<form action="" method="post">
<input type="text" value="Enter Search"><a href="#">Search</a>
</form>
</div><!-- end search_box -->
</div><!--/.nav-search -->
</div>
</div>
</div>
我在这里创建了一个jsfiddle:http://jsfiddle.net/vsF6m/3/
客户端希望一次只打开一个下拉列表。现在,功能是每个按钮都会自行切换,但不会关闭另一个打开的下拉列表。
一定是我错过了什么。我是否需要重建导航栏的组装方式?
谢谢!
在这里看到一个工作的jsfiddle:http://jsfiddle.net/gNUEx/
$('.container a').click(function(){
var $target = $($(this).data('target'));
if(!$target.hasClass('in'))
$('.container .in').removeClass('in').height(0);
});
这里有更多关于 Bootstrap 如何使用 Collapse 插件实现手风琴功能的内容。我的第一个倾向是建议仅使用手风琴标记来实现您的目的,但不幸的是,用于设置手风琴功能的某些标记(即类.accordion-group
)具有与之关联的视觉样式,因此使用针对您需要的代码的淡化版本可能更容易。
以下是相关代码段:
$('.navbar').on('show', 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)
}
})
这将关闭在委托父级中找到的任何其他打开的collapse
元素,在本例中为 .navbar
。 在实践中,我建议使用 ID 而不是类来选择委托的父级。