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/

クライアントは、一度に 1 つのドロップダウンのみを開く必要があります。現在、機能は各ボタンがそれ自体を切り替えますが、他の開いているドロップダウンを閉じません。

私が見逃している何かがあるはずです。そのナビゲーション バーの組み立て方法を再構築する必要がありますか?

ありがとう！

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 に答える