web-dev-qa-db-ja.com

ブートストラップ3の折りたたみメニューがクリックで閉じない

私はブートストラップ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>

それはより小さな装置で普通に崩壊する。メニューボタンをクリックするとメニューが展開されますが、メニューリンクをクリックすると（またはそのことについてタッチすると）、メニューは開いたままになります。もう一度閉じるにはどうすればいいですか。

htmlcsstwitter-bootstrapnavigation
117
Paranoia

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

46
VCNinc

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（）で行う必要はなく（メニューに動的にリンクを追加しても機能します）、メニューがすでに展開されている場合にのみ呼び出されます。メニューが開いてすぐに閉じると、メニューに「in」クラスがあることを確認できないという奇妙な点滅が報告されている人もいます。

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

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
130
Kevin Nelson

これを変更してください。

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

121
FullStackDev

私は同じ問題を抱えていたがを2回bootstrap.jsとjquery.jsファイルをインクルードすることによって引き起こされた。

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

51
raisercostin
$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

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

15
Chakradhar Vyza

私は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>
10
Paul

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

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
6
Syed

やった

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});
5
weaveoftheride

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

5
Densol

以下のように、メニュー項目自体を変更するために先に投稿した解決策は、メニューが小さいデバイス上にあるときにはたらきますが、メニューが全幅で拡大されているときには副作用があります。水平スクロールバーがメニュー項目の上にスライドすることがあります。 JavaScriptソリューションにはこのような副作用はありません。

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

（このように答えて申し訳ありませんが、その答えにコメントを追加したいと思いましたが、私は発言するのに十分な信用を持っていないようです）

4
Wim Van Houts
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
2
Chit

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

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

<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);
      }
    }
  }
}
1
halllo

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
Mirna De Jesus

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

0
Vasko

私は携帯電話だけでなく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();
    }
  }

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

0
stathoula

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

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})
0
Roddy P. Carbonell

私は、多くの闘争、試行錯誤の末、jsfiddleに関する私にとって最良の解決策であることがわかりました。 jsfiddle.netのインスピレーションへのリンク 。ブートストラップのnavbar navbar-fixed-topと折りたたみとハンバーグの切り替えを使用しています。これがjsfiddleに関する私のバージョンです： jsfiddle Scrollspy navbar 。私はgetbootsrap.comの指示に従って基本的な機能を手に入れただけでした。私にとっては、問題はほとんどgetbootstrapサイトが推奨する曖昧な指示とjsにありました。最良の部分は、この余分なjs（上記のスレッドで言及されていることの一部を含みます）を追加することで、Scrollspyに関するいくつかの問題が解決されたことです。

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

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

topMenu = $（ "＃myScrollspy"）、

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

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

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

0
Adam Calihman

ボタンに必要なのは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>
0
Marodo

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

0
Aman Arun

簡単ドロップダウン崩壊クラスのためにJavaScriptで関数を作ってみてください。

例：

JS：

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

この関数をonClick単純フックにフックしてください。

0
yasir_mughal

問題は、古いバージョンのブートストラップまたはjqueryを使用していること、ORマークアップで複数のバージョンを呼び出していることです。

ただ最新のバージョンを保管してください、あなたはただ一つの参照を必要とします。問題を解決します。

0
Nick

私は同じ問題を抱えていた、bootstrap.jsがあなたのHTMLページに含まれていることを確認してください。私の場合はメニューは開いたが閉じなかった。ブートストラップのjsファイルを含めるとすぐに、すべてうまくいきました。

0
Roland

あなたはあなたのjQueryとBootstrap.min.js ATFをロードしていることを確実にしたいと思うかもしれません。あなたのナビゲーションがあなたのHTMLの一番下にあなたのスクリプトがあるならば、あなたのナビゲーションはページ上にレンダリングする最初のものです。あなたはどんなJavaScript機能も失います。

0
Chris Johnson