ブートストラップ3の折りたたまれたメニューがクリックしても閉じない

122

ブートストラップ3の多かれ少なかれ標準的なナビゲーションがあります

<body data-spy="scroll" data-target=".navbar-collapse">
    <!-- ---------- Navigation ---------- -->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="index.html"> <img src="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                </ul>
            </div>
        </div>
    </div>

小さなデバイスでは通常は折りたたまれます。メニューボタンをクリックするとメニューが展開しますが、メニューリンクをクリック（またはタッチ）すると、メニューは開いたままになります。もう一度閉じるにはどうすればよいですか？

html  css  twitter-bootstrap  navigation 
— パラノイア
ソース
5
user3669917の答えは、確かに最も簡単で簡単な答えです。
— トーマス
1
— Inanc Gumus

回答:

48

ブートストラップのデフォルト設定では、メニュー項目をクリックしてもメニューが開いたままになります。.collapse('hide');折りたたむjQuery要素を呼び出すことにより、この動作を手動でオーバーライドできます。

— VCNinc
ソース
8
これは間違っています。ブートストラップは自動的に「折りたたみ」クラスを切り替えます。追加のjqueryコードは必要ありません。あなたがそのような振る舞いをしているなら、それはあなたのhtmlコードに何か問題があることを意味します（私の部分では、jqueryとブートストラップを2回含めました、@ raisercostinの答えを参照してください）。
— RomOne 2017
@RomOneこの答えは正しいです。リンクがデフォルトでクリックされた後、ブートストラップはメニューを閉じません。他の回答は、人々が誤ってjQueryを2回インクルードした場合にのみ適用されます。これは、この質問に対する正しい回答ではありません。
— ジム
136

GitHubのソリューションからこれを共有するためだけに、これは人気のある答えでした：

https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

これはドキュメントに関連付けられているので、ready（）で行う必要はありません（メニューに動的にリンクを追加でき、引き続き機能します）。メニューが既に展開されている場合にのみ呼び出されます。一部の人々は、メニューがどこにあるのかを確認できなかった他のコードでメニューが開いてすぐに閉じる奇妙な点滅を報告しました。

[2014-11-04更新]サブメニューを使用すると、上記の問題が発生する可能性があるため、上記を次のように変更しました。

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
— ケビン・ネルソン
ソース
1
完璧に動作します。共有してくれてありがとう！
— Rodrigo Chiong、2015年
'$（this）.collapse（' hide '）;'について説明できますか お願いします。私は「崩壊」がどこから来るのか分かりません
— timebandit
@ImranNazir、これは質問の後に申し訳ありませんcollapseが、ブートストラップによって定義され、jQueryオブジェクトにアタッチされるメソッドです...おそらく、これらは複数の目的（アコーディオン、ナビゲーションバーなど）に再利用します：getbootstrap.com/javascript /＃collapse-usage
— Kevin Nelson
更新されたコードは私にとってはうまくいきましたが、これ以上の答えはうまくいきませんでした。ありがとう！
— RandomUs1r 2017年
「[UPDATE 2014-11-04]」が機能しました。bootstrap.jsとjqueryへの重複した参照を削除することを推奨する他のソリューションについては、ソリューションは不要です。この解決策は、デバッグにかかる​​時間を短縮し、より明示的な動作で問題を修正するために見つけました。ありがとうございました！。それが私を助けたように、これがあなたを助けてくれることを願っています。
— Nour Lababidi 2017年
122

これを変える： 

<li><a href="#one">One</a></li>

これに：

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

この簡単な変更は私にとってうまくいきました。

参照：https : //github.com/twbs/bootstrap/issues/9013

— FullStackDev
ソース
14
このソリューションはモバイルビューでは問題ありませんが、リンクをクリックすると、大きな画面にアニメーションの表示/非表示が表示されます。
— Ayman Al-Absi 2015年
22
@ AymanAl-Absi 値の.in最後に追加する必要がありdata-targetます：data-target=".navbar-collapse.in"。この回答のコメントから：stackoverflow.com/a/21797534/89818
— caw
これは私にとってはうまく機能しますが、スクロールスパイを壊します。
— クレイグハーレー
1
上記のコードを@cawの回答で更新すると、うまくいきました。scrollspy機能も使用しています。
— Niraj 2017年
これは断然最良の解決策です。JavaScriptもjQueryもありません。特定のリンクでメニューを開いたままにしたい場合は、これらのパラメーターを追加しないでください。ベストアンサーとして指摘する必要があります。ありがとうございました。
— ed1nh0
55

私は同じ問題を抱えていましたが、2回 bootstrap.jsとjquery.jsファイルを含めることによって引き起こされました。

シングルクリックで、イベントは両方のjqueryインスタンスによって2回処理されました。1つは閉じ、もう1つはトグルを開きました。

— レイザーコスタン
ソース
3
私はまったく同じ問題を抱えていましたが、それらが2回含まれていることに気付きませんでした。これを投稿してくれてありがとう！
— Brian ONeil 2014年
2
私たちのインターンもそうしました。これを投稿してくれてありがとう。
— Teisman、2015
2
おとこ！私も同じことをした-私はインターンに戻ったと思います！
— Dicer、2016年
2
とても参考になりました！私はこれに何日も取り組んできました。これは、ナビゲーションバーテンプレートを使用する場合に非常に一般的です。注意してください！:)
— マットバトラー
2
これはベストアンサーとしてマークする必要があります。同じ問題でbootstrap.jsを削除すると問題が解決しました
— katwekibs '14
17 
$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

これは、ナビゲーションバーのドロップダウンの処理に役立ちます

— チャクラダールビザ
ソース
これにより、jssorスライドショーのJavaScriptでブートストラップを使用すると問題が発生する問題が修正されました。このコードは、モバイルメニューを展開したり折りたたんだりするときにもクールな効果を生み出します。
— Adam West
@Chakradharのおかげで、時間を節約できました。
— Omar Bahir
ありがとう、Laravel 5.5 JSのメインのjsファイルにBとJqueryが含まれていることを忘れていました。
— ジャックバイアル2017年
12

私はBootstrap 4、alpha-6で同様の問題を抱えている/抱えていました。上記のJoakim Johanssonの答えが正しい方向に私を導きました。JavaScriptは必要ありません。data-target = "。navbar-collapse"とdata-toggle = "collapse"をナビゲーション内のdivタグに挿入しましたが、リンク/ボタンを囲んでいました。

<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
   <a class="nav-item nav-link" href="#">Menu Item 1</a>
   ...
</div>
スニペットを展開

— ポール
ソース
あなたの投稿は私を大いに助けてくれました。これは、<=、本体データ・トグル=「崩壊」のデータ・ターゲット「ナビゲーションバー-崩壊。」>私のためにそれを解決
— デシュ
これは3年前にすでに投稿されています。さらに、それは非モバイルビューでアニメーションを壊します。
— Bevor
6

私はこの質問がBootstrap 3に関するものであることを知っていますが、Bootstrap 4の解決策を探しているなら、これを実行してください：

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
— サイード
ソース
私はBS4ベータを使用しており、コードは完全に機能します。私はここで他のすべての提案された解決策を運なしで試しました。BS4は明らかに他のソリューションが適用されないほど十分に変更されています。
— 自転車デイブ
関連性と更新された情報との並行性を維持するため-これが最良の答えです。
— リッキー
@Ricky OPは、4ではなくBootstrap 3を指定しました
— Malavos
ドロップダウン付きのメニューの場合、これを使用しました：$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
— James Wilkins
5

私は同じ問題を抱えていました。私はとを使用jQuery-1.7.1していましたbootstrap 3.2.0。私はjQueryのバージョンを最新（jquery-1.11.2）のバージョンに変更しましたが、すべてうまくいきます。

— デンソル
ソース
4

以下に示すように、メニュー項目自体を変更するために以前に投稿したソリューションは、メニューが小さなデバイスにある場合に機能しますが、メニューが全幅で展開されている場合は副作用があります。これにより、水平スクロールバーがスライドします。メニューアイテム。JavaScriptソリューションには、このような副作用はありません。

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

（このように答えて申し訳ありませんが、その答えにコメントを追加したかったのですが、発言するのに十分なクレジットがないようです）

— Wim Van Houts
ソース
2 
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
— 伝票
ソース
新しいバージョンのMatthias Sをチェックしてください:-)
— Chit
@bfontaineまず、メニューdivにidを追加する必要があります。メニューをクリックすると、すべてのメニューが非表示になります。例：-About usメニューをクリックすると、残りのメニュータブが非表示になります。
— チット2017
1
ありがとう、しかしその書き込みを喜ばにあなたの答え;）
— bfontaine
1

Angularのディレクティブ内で.collapse（ 'hide'）を呼び出してこの動作を手動でオーバーライドする場合は、次のコードを使用します。

JavaScriptファイル：

angular
  .module('yourAppModule')
  .directive('btnAutoCollapse', directive);

function directive() {
  var dir = {
    restrict: 'A',
    scope: {},
    link: link
  };
  return dir;

  function link(scope, element, attrs) {    
    element.on('click', function(event) {              
      $(".navbar-collapse.in").collapse('hide');
    });
  }
}

HTML： 

<li class="navbar-btn">
     <a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>
— ミルナデジーザス
ソース
1

最新のブートストラップjsバージョンを使用していることを確認してください。私は同じ問題に直面していて、bootstrap-3.3.6からbootstrap.jsファイルをアップグレードするだけで魔法がかかりました。

— アマンアルン
ソース
1

モバイル画面での使用時にナビゲーションのみを切り替える場合は、data-toggle="collapse"とdata-target="#navbar"をに追加するだけでモバイル画面で機能しますが、デスクトップ画面をクリックすると奇妙なちらつきが発生します。AureliaまたはAngular環境では、jQueryソリューションはうまく機能しません。

私にとって最良の解決策は、対応するメディアクエリをリッスンし、data-toggle="collapse"必要に応じて属性に追加するカスタム属性を作成することでした。

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

Aureliaのカスタム属性は次のようになります。

import {autoinject} from 'aurelia-framework';

@autoinject
export class CollapseToggleIfLess768CustomAttribute {
  element: Element;

  constructor(element: Element) {
    this.element = element;
    var mql = window.matchMedia("(min-width: 768px)");
    mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList));
    this.handleMediaChange(mql);
  }

  handleMediaChange(mediaQueryList: MediaQueryList) {
    if (mediaQueryList.matches) {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (dataToggle) {
        this.element.attributes.removeNamedItem("data-toggle");
      }
    } else {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (!dataToggle) {
        var dataToggle = document.createAttribute("data-toggle");
        dataToggle.value = "collapse";
        this.element.attributes.setNamedItem(dataToggle);
      }
    }
  }
}
スニペットを展開

— Halllo
ソース
0

私は多くの苦労、試行錯誤を繰り返した結果、jsfiddleで私にとって最良の解決策を見つけました。 jsfiddle.netのインスピレーションへのリンク。私は折りたたみとハンバーガーのトグルでブートストラップのnavbar navbar-fixed-topを使用しています。これがjsfiddleの私のバージョンです：jsfiddle Scrollspy navbar。getbootsrap.comの手順を使用して、基本的な機能のみを取得していました。私にとって、問題は主に漠然とした方向性とgetbootstrapサイトで推奨されているjsにありました。最良の部分は、このjsの追加ビット（上記のスレッドで言及されている内容の一部が含まれています）を追加することで、Scrollspyのいくつかの問題が解決されたことです。

  1. 折りたたみ/トグルされたナビゲーションメニューは、ナビゲーションの「セクション」（例：href = "＃foobar"）をクリックすると非表示になります（このスレッドのアドレス指定に関する問題）。
  2. アクティブな「セクション」が正常に強調表示されました（つまり、jsがclass = "active"を正常に作成しました）
  3. 折りたたまれたナビゲーション（小さな画面のみ）にある迷惑な垂直スクロールバーが削除されました。

注：以下に示すjsコードでは（私の投稿の2番目のjsfiddleリンクから）：

topMenu = $（ "＃myScrollspy"）、

...値 "myScrollspy"は、HTMLのid = ""と一致する必要があります...

<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">

もちろん、その値を好きな値に変更できます。

— アダム・カリマン
ソース
0

必要なのは、ボタンのdata-target = "。navbar-collapse"だけです。

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
— マロード
ソース
+1：これは、data-toggle = "collapse" data-target = "。navbar-collapse"を<a />に追加することでも機能します。私の場合は、<React with Meteorjsの<Link />に感謝します。
— Joe L.
はい、それは動作しますが、動作し<a/>ませんでした<NavLink/>、それは崩壊しますが、<NavLink/>もう動作していません。
— ピラミッド
0

これは私のために働いたコードです：

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})
— ロディ・P・カルボネル
ソース
0

同じ問題が発生しました。htmlページにbootstrap.jsが含まれていることを確認してください。私の場合、メニューは開きましたが閉じませんでした。ブートストラップjsファイルをインクルードするとすぐに、すべてがうまくいきました。

— エリトミア
ソース
0

ドロップダウン折りたたみクラスのJavaScriptで関数を作成してみます。

例：

JS：

$scope.toogleMyClass  = function(){

    //dropdown-element

    $timeout(function(){
        $scope.preLoader = false;
        $(document).ready(function() {
            $("#dropdown-element").toggleClass('show');
        });
    },100);

};

この機能をonClick簡単な作業にフックしてください。

— yasir_mughal
ソース
0

私は同様の問題を抱えていましたが、開いたままにせず、すばやく開いたり閉じたりするため、bootstrap.min.jsの前にjquery-1.11.1.min.jsをロードしていることがわかりました。そこで、これら2つのファイルの順序を逆にして、メニューを修正しました。今は問題なく動作します。それが役に立てば幸い

— バスコ
ソース
0

問題は、古いバージョンのブートストラップまたはjqueryを使用しているか、マークアップで複数のバージョンを呼び出している可能性があります。

最新バージョンを保持するだけで、必要な参照は1つだけです。問題を解決します。

— ニック
ソース
0

jQueryとBootstrap.min.js ATFを確実にロードしたい場合があります。ナビゲーションはページで最初にレンダリングするものであるため、HTMLの下部にスクリプトがある場合、JavaScript機能が失われます。

— クリスジョンソン
ソース
0

私はモバイルでのみ同じ問題を抱えていましたが、Angularアプリケーションの場合、これは私がしたことです：

app.component.html

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="col-md-12">
      <div class="navbar-header page-scroll">
      <button id ="navButton" style="color:red"type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" routerLink="/"><img id="navbrand" class="site-logo"  src="assets/img/yayaka_logo.png"/></a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <li class="dropdown" appDropdown>
          <a class="dropdown-toggle" style="cursor: pointer;">
            ΤΙ ΕΙΝΑΙ ΤΟ yayaka<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a (click) = "closeMenu()" href="/#about">About</a></li>
            <li><a (click) = "closeMenu()" href="/#services">Services</a></li>
          </ul>
        </li>
        <li class="page-scroll">
          <a (click) = "closeMenu()" routerLink="/profiles"><strong>Profiles</strong></a>
        </li>
      </ul>
    </div>
  </div>
  </div>
</nav>

app.component.ts 

 closeMenu() {
    var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
    if (isMobile) {
      document.getElementById('navButton').click();
    }
  }

それが役に立てば幸い ：）

— Stathoula
ソース
-2

私のメニューはnavbarの標準メニューではありませんが、「onclick」関数と「.click（）」を使用して鉱山を自動的に折りたたむことができました。

<div class="main-header">
    <div class="container">
        <div id="menu-wrapper">
            <div class="row">

                <div class="logo-wrapper col-lg-4 col-md-6 col-sm-7 hidden-xs">

                </div> <!-- /.logo-wrapper -->

                <div class="logo-wrapper2 visible-xs col-xs-9">

                </div> <!-- /.smaller logo-wrapper -->

                <div class="col-lg-8 col-md-6 col-sm-5 col-xs-3 main-menu text-center">
                    <ul class="menu-first hidden-md hidden-sm hidden-xs">
                        <li class="active"><a href="#">item1</a></li> |
                        <li><a href="#our-team">item2</a></li> |
                        <li><a href="#services">item3</a></li> |
                        <li><a href="#elia">item4</a></li> |
                        <li><a href="#portfolio">item5</a></li> |
                        <li><a href="#contact">item6</a></li>
                    </ul>
                    <a href="#" class="toggle-menu visible-md visible-sm visible-xs"><i class="fa fa-bars"></i></a>
                </div> <!-- /.main-menu -->
            </div> <!-- /.row -->
        </div> <!-- /#menu-wrapper -->
        <div class="menu-responsive hidden-lg">
            <ul>
                <li class="active" onclick = $(".toggle-menu").click();><a href="#">item1</a></li>
                <li><a href="#our-team" onclick = $(".toggle-menu").click();>item2</a></li>
                <li><a href="#services" onclick = $(".toggle-menu").click();>item3</a></li>
                <li><a href="#elia" onclick = $(".toggle-menu").click();>item4</a></li>
                <li><a href="#portfolio" onclick = $(".toggle-menu").click();>item5</a></li>
                <li><a href="#contact" onclick = $(".toggle-menu").click();>item6</a></li>
            </ul>
        </div> <!-- /.menu-responsive -->
    </div> <!-- /.container -->
</div> <!-- /.main-header
— ブラボー・ステファン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.