1

我是第一次使用 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 &amp; 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/

客户一次只希望打开一个下拉菜单。现在，功能是每个按钮都会自行切换，但不会关闭另一个打开的下拉菜单。

一定有我想念的东西。我需要重建导航栏的组装方式吗？

谢谢！

4

2 回答 2

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);    
});​
于 2012-11-26T17:51:03.603 回答
2

这里有更多关于 Bootstrap 如何使用 Collapse 插件实现手风琴功能的内容。我的第一个倾向是建议仅出于您的目的使用手风琴标记，但不幸的是，一些用于设置手风琴功能的标记（即 class .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 而不是类来选择委派的父级。

JSFiddle

于 2012-11-26T18:42:41.670 回答