web-dev-qa-db-ja.com

Bootstrap 3メニュー項目のクリックでドロップダウンメニューを非表示

フィドルをチェックアウト 基本的なBootstrap 3のようなレスポンシブナビゲーションがあります：

    <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>

ナビゲーションアイテムは、異なるページではなくページ上のセクションにリンクしているため、クリック時にドロップダウンを非表示にする必要があります。

JQueryでドロップダウンを手動で切り替えようとすると、ドロップダウントグルボタンの将来の機能が台無しになります。

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

これに対するより良い修正はありますか？

jquerytwitter-bootstrapdrop-down-menuresponsive-designuinavigationbar
15
dougmacklin

JavaScriptなしでこれを実行したい場合は、次のように、各リスト項目にデータターゲットとデータトグルを追加するだけです。

<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の場合、これは実際にトグルボタンがあるモバイルビューモードでのみ機能します。奇妙なことは、navbarが公開されているときに発生します（トグルボタンは表示されません）。

24
Charly

これを変える：

$(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");
    });
});

http://jsfiddle.net/fw7vh/4/ を参照してください

8
Gloria

折りたたまれたナビゲーションバーのメニュードロップダウンのメニュー項目をクリック/タップしても、Bootstrapのメニューが自動的に切り替えられない理由はわかりません。これを行うためのより優雅な方法があるかもしれませんが、ここでそれを修正する方法があります（Bootstrap 3.0.3）を使用して：

<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>

基本的に、リンクには2つのバージョンがあります。1つはナビゲーションバーメニューを切り替えるメニュートグル（ブラウザー幅<768px）が表示されるたびに表示され、もう1つは折りたたまれません（ブラウザー幅> 768px）。 2番目のタイプを追加しない場合、メニューがないときにメニューを切り替えようとすると、奇妙なファントムアニメーションの水平スクロールバーが表示されます。

3
bhall

私はBootstrapが初めてですが、上記のコードを少し変更するだけで、今ではうまく動作します。ロゴをクリックすると、ドロップダウンメニューも閉じるはずです。 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");
        });
});
2
RMattos

Bootstrap 3.3.4で、古い方法が機能しなくなったことに気付きました。

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