「クリック時に」レスポンシブメニューを閉じるブートストラップ

86

[製品]をクリックして、白いdivを上にスライドさせます（添付の図を参照）。レスポンシブ（モバイルおよびタブレット）の場合、レスポンシブナビゲーションバーを自動的に閉じて、白いバーのみを表示したいと思います。

私は試した：

$('.btn-navbar').click();

また試した：

$('.nav-collapse').toggle();

そしてそれは機能します。ただし、デスクトップサイズでは、これは呼び出され、メニューにファンキーなことをして、1秒間縮小します。

何か案は？

ここに画像の説明を入力してください

javascript  html  css  twitter-bootstrap 
— user1040259
ソース
HTMLを投稿していただけませんか。また、非表示機能にBootstrapを使用していますか？それとも、独自の何かを実装しようとしていますか？
— Kris Hollenbeck 2013年
簡単なことをやろうとしているだけだと思います。「製品」をクリックしたときにナビゲーションバーを閉じたいだけです
— user1040259 2013年
ここでこれらすべてのソリューションを自分で比較したくない場合は、この回答の＃1を編集してください。
— カウ
ここを少し下にスクロールして、@ LukeTillmanの回答を確認することをお勧めします。jQueryなしで完全に機能します。:)
— das Keks 2016

回答:

102

アニメーションで動作するようになりました！

HTMLのメニュー：

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

ナビゲーション内のすべての要素のクリックイベントを折りたたみメニューにバインドする（ブートストラップ折りたたみプラグイン）：

 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });

編集 より一般的にするために、次のコードスニペットを使用できます

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });
— mollwe
ソース
3
すべてのa要素ではない場合：必要なのは電話することだけです$("#nav-main").collapse('hide');
— Ankit Jain 2014
@mollweドロップダウンメニューがある場合の解決策はありますか？jsfiddleを作ってみましたが、メニューも開かない。jsfiddle.net/Y3H92
— clankill3r
@ clankill3r bootstrap.jsへの参照が欠落しているため、メニューが機能しないようです。jsfiddleを更新しました：jsfiddle.net/Y3H92/1
— mollwe
@mollweとあなたのフィドルでは、メニューはまったく閉じません。
— clankill3r 2014
1
返信が遅くなってすみません@ clankill3r！しかし、決して遅くなるよりはましだ。jsfiddle.net/mollwe/Y3H92/5
— mollwe
136

ブートストラップ折りたたみオプションにすでに含まれているものに追加のJavaScriptを追加する必要はありません。代わりに、navbar-toggleボタンの場合と同じように、メニューリスト項目にデータ切り替えセレクターとデータターゲットセレクターを含めるだけです。したがって、製品メニュー項目の場合は次のようになります。

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

次に、メニュー項目ごとにデータ切り替えセレクターとデータターゲットセレクターを繰り返す必要があります。

編集!!! オーバーフローの問題とこの修正のちらつきを修正するために、これを修正し、まだ余分なjavascriptがないコードをいくつか追加しています。新しいコードは次のとおりです。

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

ここでそれは働いていますhttp://jsfiddle.net/jaketaylor/84mqazgq/

これにより、トグルセレクターとターゲットセレクターが画面サイズに固有になり、大きなメニューの不具合がなくなります。それでもグリッチの問題が発生する場合は、お知らせください。修正を見つけます。ありがとう

編集：ブートストラップv4.1.3では、表示/非表示のクラスを使用できませんでした。代わりにhidden-xs使用d-none d-sm-blockし、代わりにvisible-xs使用d-block d-sm-none。

— ジェイクテイラー
ソース
14
ナビゲーションが「レスポンシブ」メニューとして表示されていない場合、ちらつきや奇妙なものが発生します。
— フロリアン
5
これは正しい実装です。カスタムjQueryは必要ありません。
— larrylampco 2014年
私はこの回答と以前のコメントに対する反対票を削除しました（ビデオが機能しなくなったため）。ちらつきについての私のコメントは元の回答に対してまだ有効であるため、いくつかの賛成票を獲得し、あなたの「編集」が明確にマークされているので、それを削除して履歴を書き換える理由がわかりません。それは当時有効であり、あなたはそれに応じて反応しました。あなたの答えを読んでいる人々は「編集」を見て、あなたがそれを改善したことを知っているでしょう...
— フロリアン
完全に文書化されたJavaScriptの1行を避けるために、すべてのリンクを複製したいですか？getbootstrap.com/javascript/#collapse-methods。
— Sander Garretsen 2016年
1
代わりに、追加のdata-toggleとdata-targetあなたの代わりに親にそれを追加することができ、すべてのli要素に属性をulまたはdivタグ。
— ジェレミークイック
40

私はあなたがエンジニアリングの至る所にいると思います。

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

編集：サブメニューを処理するには、それらのトグルアンカーにドロップダウン-トグルクラスがあることを確認してください。

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

編集2：電話タッチのサポートを追加します。

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });
— ホントーニ
ソース
3
受け入れられた答えでなければなりません。他のものは過剰に設計されており、応答しないディスプレイでちらつきます。
— rybo111 2014年
3
これは受け入れられた答えかもしれませんが、サブメニューを考慮に入れておらず、実際にはそれらを壊しています。他の「過剰に設計された」ソリューションのいくつかは、欠点にもかかわらず、これを考慮に入れていました。次の追加でこれを処理します：$（function（）{$（ '。navbar-collapseul li a：not（.dropdown-toggle）'）。click（function（）{$（ '。navbar-toggle：可視 '）。click（）;}）;}）;
— エドビショップ
素晴らしい、あなたの編集に感謝します！
— ホントニ2014年
1
タッチスタートは少々多すぎると思いますが、クリックは問題なく機能します。ボタンから「開始」すると、スライドにどのように反応しますか？
— ホントニ2014年
37

JavaScriptを追加せずに、Bootstrapの折りたたみトグルを利用するというJakeTaylorのアイデアが本当に気に入りました。data-targetセレクターを少し変更してinクラスを含めることで、メニューが折りたたまれたモードでないときに発生する「ちらつき」の問題を修正できることがわかりました。したがって、次のようになります。

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>

ネストされたドロップダウン/メニューでテストしなかったので、YMMV。

— ルーク・ティルマン
ソース
3
これは私にとっても最高の実装でした。
— huijing 2015
何らかの理由で、私のScrollSpyはこのメソッドで壊れますが、JakeTaylorのメソッドでは正常に動作します。
— インクリング
これまでのところ、最良かつ最も単純な答えです。
— Diaa 2017年
ちらつきのない崩壊をしばらくの間機能させようと試みてきましたが、これは断然最もシンプルでエレガントな解決策です。ありがとうございました！
— McVenco 2017年
9

完全を期すために、Bootstrap4.0.0では.showを使用したベータ版が機能しました...

<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
— vidriduch
ソース
私にとってのベストアンサー、ありがとう。
— MoxxiManagarm
5

Bootstrapの例とすべてに基づいて、ナビゲーション領域を定義するこのような行があると仮定します

<div class="nav-collapse collapse" >

メニューボタンのように、プロパティをそのまま追加するだけです

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

に追加しました <body>て、働きました。私がそれをプロファイリングしたとは言えませんが、私にはおもてなしのようです... UIのランダムな場所をクリックしてメニューを開くまでは、それほど良くありません。

DK

— ダグラス 'DK'クヌーセン
ソース
Bootstrapの組み込み機能に依存する適切なソリューション。追加のjQueryやjavascriptはありません。そして、すべての中で最も簡単な解決策。これは受け入れられた答えでなければなりません。
— Sergi Papaseit
4

これは機能しますが、アニメーション化されません。

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
— user1040259
ソース
8
クリックして閉じる方がデフォルトとして適しているため、このための構成オプションがないのは少し驚きです。
— bchesley 2013年
3

HTMLでは、私はクラスの追加のnav-リンクに各ナビゲーションリンクのタグ。

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);
— ジェイソン・スウィンゲン
ソース
3

このソリューションは、デスクトップとモバイルでうまく機能します。

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">
— bp002
ソース
navbar-idをデータターゲットとして使用するときに私のために働いた：<div id = "navbar" class = "collapse navbar-collapse" data-toggle = "collapse" data-target = "＃navbar">しかし、醜いアニメーションを与えるデスクトップサイズの場合
— wutzebaer 2016年
非常に醜い、受け入れられない！
— キャンドルジャック2017年
2

user1040259のソリューションを詳しく説明するために、このコードを$（document）.ready（function（）{}）;に追加します。 

    $('.nav').click( function() {
        $('.btn-navbar').addClass('collapsed');
        $('.nav-collapse').removeClass('in').css('height', '0');
    });

彼らが言及しているように、これは動きをアニメーション化しません...しかしそれはアイテム選択のナビゲーションバーを閉じます

— CharlesA
ソース
2

これでAngularJSとAngularUIルーターを使用している人のために、これが私の解決策です（mollweのトグルを使用）。ここで、「。navbar-main-collapse」は私の「データターゲット」です。

ディレクティブの作成：

module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'C',
        link: function (scope, element) {
            //watch for state/route change (Angular UI Router specific)
            $rootScope.$on('$stateChangeSuccess', function () {
                if (!element.hasClass('collapse')) {
                    element.collapse('hide');
                }
            });
        }
    };
}]);

使用指令：

<div class="collapse navbar-collapse navbar-main-collapse">
    <your menu>
— カイル
ソース
ディレクティブをクラスattrに配置したようですが、そうですか？
— Gringo Suave 2015
リンク関数内では、以下が機能するはずです。element.on（ 'click'、function（）{scope.vm.isCollapsed =！scope.vm.isCollapsed;}）;
— JimmyBob 2016年
2

これでうまくいくはずです。

bootstrap.jsが必要です。

例=> http://getbootstrap.com/javascript/#collapse

    $('.nav li a').click(function() {
      $('#nav-main').collapse('hide');
    });

これは、ナビゲーションメニュータグに「data-toggle = "collapse"」および「href = "yournavigationID"」属性を追加するのと同じことを行います。

— JussiJärviö
ソース
答えをもう少し詳しく説明していただけますか？
— Blunderfest 2015
それはjQueryではありませんか？jQueryとAngularの両方を使用することは一般的に悪い習慣ではありませんか？
— AlxVallejo 2016
1

私はmollwe関数を使用していますが、2つの改善点を追加しました。

a）クリックされたリンクが折りたたまれている場合（他のリンクを含む）、ドロップダウンが閉じないようにします

b）表示されているWebコンテンツをクリックしている場合は、ドロップダウンも非表示にします。

jQuery.fn.exists = function() {
                  return this.length > 0;
              }

    $(function() {
                var navMain = $(".navbar-collapse");
                navMain.on("click", "a", null, function() {
                    if ($(this).attr("href") !== "#") {
                        navMain.collapse('hide');
                    }
                });

                $("#content").bind("click", function() {
                     if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
                        navMain.collapse('hide');
                    }
                });

            });
— Arco Voltaico
ソース
1

最新のスレッドではありませんが、同じ問題の解決策を探して、1つ（他のいくつかの問題が混在している）を見つけました。

私はNavButtonを与えました：

<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

次のようなID /識別子：

 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

最高の「アイデア」ではありませんが、私にとってはうまくいきます。これで、次のように（jqueryを使用して）ボタンの可視性を確認できます。

 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }

（注：これは切り取られたコードです！ナビゲーションリンクで「onclick」イベントを使用しました！（AJAX Reguestを開始します。）

結果は次のとおりです。ボタンが「表示」されている場合は「クリック」されます...したがって：Bootstrapの「フルスクリーンビュー」（幅940px以上）を使用してもバグはありません。

ラルフのご挨拶

PS：IE9、IE10、Firefox 25で問題なく動作します。他の人をチェックしませんでした-しかし、問題は見当たりません:-)

— ラルフD。
ソース
1

これは私のために働いた。メニューボタンをクリックすると、クラス 'in'を追加または削除します。これは、そのクラスを追加または削除することで、トグルがデフォルトで機能するためです。'e.stopPropagation（）'は、ブートストラップによってデフォルトのアニメーションを停止することです（おそらく）クラスの追加または削除の代わりに 'toggleClass'を使用することもできます。

$（ '＃ChangeToggle'）。on（ 'click'、function（e）{

        if ($('.navbar-collapse').hasClass('in')) {
            $('.navbar-collapse').removeClass('in');
            e.stopPropagation();
        } else {
            $('.navbar-collapse').addClass('in');
            $('.navbar-collapse').collapse();
        }

    });
— ガウタミ
ソース
0

あなたはcauを使用します 

ul.nav {
    display: none;
}

これにより、デフォルトでナビゲーションバーが閉じます。誰かがこれが役に立つと思うことを私に知らせてください

— クリス
ソース
2
問題は、レスポンシブメニューではなく、「通常」に表示されたときにナビゲーションが非表示になることです。
— フロリアン
0

たとえば、切り替え可能なアイコンが非常に小さいデバイスでのみ表示される場合は、次のようにすることができます。

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

[data-toggle = "offcanvas"]をクリックすると、ブートストラップの.hidden-xsが＃side-menuに追加され、サイドメニューのコンテンツが非表示になりますが、ウィンドウサイズを大きくすると再び表示されます。

— キングスリー・イジョマ
ソース
0

メニューのhtmlが 

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
</div>

onnavトグル 'in'クラスが追加され、トグルから削除されます。レスポンシブメニューが開いているかどうかを確認してから、閉じるトグルを実行します。

$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});
— Aamer Shahzad
ソース
0

コンソールエラーなしで、IEブラウザ互換の回答であるTuggle NavClose。ブートストラップを使用している場合は、これを使用してください

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})
— スーパーモデル
ソース
-1 
$('.navbar-toggle').trigger('click');
— Aqib
ソース
なぜこれが正しい答えではないのか分かりませんか？そのクリックイベントのメニューリンクのいずれかをクリックするたびに、メニューを切り替えることができます。これは、メニューを開いたり閉じたりするデフォルトの動作を変更しないため、正しい方法だと思います。
— Aqib 2017年
-1

Javascriptを使用しないブートストラップ4ソリューション

data-toggle="collapse" data-target="#navbarSupportedContent.show" divに属性を追加する<div class="collapse navbar-collapse">

あなたは正しい提供していることを確認してくださいid中にdata-target

<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">

.show 大きな解像度でメニューがちらつくのを避けるためです

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
スニペットを展開

— kiranvj
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.