ブートストラップ3メニュー項目のドロップダウンメニューを隠す

Question

Check out the fiddleをクリックします。私はそうのような基本的なブートストラップ3応答NAVを持っている：

<div id="navbar" class="navbar navbar-fixed-top navbar-inverse"> 
     <div class="container"> 
      <a id="navbar-toggle" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 

      <a class="navbar-brand" href="#">Title Title Title</a> 

      <div id="nav-collapse" class="nav-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#option1">Option 1</a></li> 
        <li><a href="#option2">Option 2</a></li> 
        <li><a href="#option3">Option 3</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

NAV項目が異なるページをので、私はクリックで非表示にするドロップダウンを必要とするのではなく、ページ上のセクションにリンクしています。

私はjQueryを使って手動でドロップダウンを切り替えるしようとするたびに、それがドロップダウントグルボタンの将来の機能を台無しに：

$("#navbar li a").click(function(event) { 
    // check if window is small enough so dropdown is created 
    $("#navbar-toggle").is(":visible") 
     $("#nav-collapse").toggle(); 
}); 

は、このためのより良い修正はありますか？

Answer 1

を参照してください。次のように各リスト項目に追加します。

<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option1">Option 1</a></li> 
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option2">Option 2</a></li> 
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option3">Option 3</a></li> 

ナビゲーションバーの場合、これは実際にはトグルボタンがあるときはモバイルビューモードでのみ機能します。 navbarが公開されているとき（トグルボタンが表示されていない）、変なことが起こります。

Answer 2

変更この：これに

$(document).ready(function() { 
    $("#navbar li a").click(function(event) { 
     // check if window is small enough so dropdown is created 
     $("#navbar-toggle").is(":visible") 
      $("#nav-collapse").toggle(); 
    }); 
    }); 

：

$(document).ready(function() { 
    $("#navbar li a").click(function(event) { 
     // check if window is small enough so dropdown is created 
    $("#nav-collapse").removeClass("in").addClass("collapse"); 
    }); 
}); 

あなたはJavaScriptをせずにこれをやってみたかった場合は、単にデータ・ターゲットとデータトグルを追加することができhttp://jsfiddle.net/fw7vh/4/

Answer 3

折り畳まれたナビゲーションバーのメニュードロップダウンのメニュー項目をクリック/タップしても、ブートストラップのメニューが自動的に切り替わるわけではありません。リンクの2つのバージョン、いつでもメニューのトグルを表示さ1があり、

<li class="visible-xs"> 
    <a href="#" data-toggle="collapse" data-target=".navbar-collapse">Link</a> 
</li> 
<li class="hidden-xs"> 
    <a href="#">Link</a> 
</li> 

を基本的には：ここ（ブートストラップ3.0.3を使用して）私はそれを修正する方法ですが、そこにこれを行うには、より優雅な方法かもしれませんが、 navbarメニューを切り替えるブラウザ幅（ブラウザの幅は< 768px）と、ブラウザのメニューを切り替えるブラウザの幅（ブラウザの幅> 768px）が表示されます。その2番目のタイプを追加しないと、メニューが表示されていないときにメニューを切り替えるときに、奇妙なファントムアニメーションの水平スクロールバーが表示されます。

Answer 4

私はブートストラップの新機能ですが、上記のコードに少し変更を加えれば、今はきれいに動作します。ロゴをクリックすると、ドロップダウンメニューも閉じるべきであることを覚えておいてください。そのため、navbar-headerを追加しました！

jQuery(document).ready(function() { 
     jQuery(".nav a, .navbar-header a").click(function(event) { 
       // check if window is small enough so dropdown is created 
       jQuery(".navbar-collapse").removeClass("in").addClass("collapse"); 
     }); 
}); 

Answer 5

ブートストラップ3.3.4では、私の古い方法が機能しなくなったことを認識しました。更新日：

if ($('div.navbar-collapse').hasClass('in')) { 
    $('button.navbar-toggle:visible').click(); 
}