web-dev-qa-db-ja.com

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

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

私は試した：

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

また試してみました：

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

そしてそれは動作します。ただし、デスクトップサイズでは、メニューとも呼ばれ、メニューが一瞬縮小するというファンキーなことをします。

何か案は？

enter image description here

javascripthtmlcsstwitter-bootstrap
81
user1040259

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

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');
     });
 });

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

 $(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');
     });
 });
94
mollwe

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

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

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

EDIT !!!この修正でオーバーフローの問題とちらつきを修正するために、これを修正するコードを追加しますが、まだ余分なコードはありません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/

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

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

131
Jake Taylor

あなたはすべてのエンジニアリングをしていると思います。

    $('.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();
            });
    });
39
Hontoni

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

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

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

36
Luke Tillman

完了するには、Bootstrap 4.0.0-betaで。showを使用しました...

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

これは機能しますが、動きません。

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
4
user1040259

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

<div class="nav-collapse collapse" >

MENUボタンのようにプロパティを追加するだけです

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

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

DK

4
Douglas 'DK' Knudsen

HTMLにクラスを追加しました ナビリンク に a 各ナビゲーションリンクのタグ。

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);
3
Jason Swingen

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

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">
3
bp002

これでAngularJSとAngular UI Routerを使用している場合、ここに私の解決策があります（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>
2
Kyle

User1040259の解決策を説明するために、このコードを$（document）.ready（function（）{}）;に追加します。

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

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

2
CharlesA

最新のスレッドではありませんが、同じ問題の解決策を探して、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で正常に動作します。他の人をチェックしませんでした-しかし、私は問題を見ることができません:-)

1
Ralph D.

これは私のために働いた。私はメニューボタンをクリックすると、クラスを追加または削除するようになりました。なぜなら、そのクラスを追加または削除することで、デフォルトでトグルが機能しているからです。 'e.stopPropagation（）'はbootstrap（i推測）によってデフォルトのアニメーションを停止します。クラスの追加または削除の代わりに '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();
        }

    });
1
Goutami

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

Bootstrap.jsが必要です。

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

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

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

1
Jussi Järviö

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');
                    }
                });

            });
1
Arco Voltaico

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

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

必ずdata-targetに正しいidを指定してください

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

Tuggle Nav Close、IEブラウザ互換の回答、コンソールエラーなし。ブートストラップを使用している場合は、これを使用します

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})
0
Super Model

メニューhtmlが

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

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

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

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

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

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

0
Kingsley Ijomah

使います

ul.nav {
    display: none;
}

これはデフォルトでnavbarを閉じます。誰もがこの便利だと思うことを教えてください

0
Kris