40

Bootstrap レスポンシブ ナビゲーション バーを使用しています。ナビゲーション バーが折りたたまれているときにメニューを開いてメニュー項目をクリックすると、メニューが自動的に閉じず、手動で閉じる必要があります。

いずれかのボタンをクリックした後、メニューを自動的に閉じることは可能ですか?

4

13 に答える 13

45

ブートストラップ 3 の作業ソリューション

$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});
于 2014-02-21T17:42:48.987 に答える
41

編集: Maximusが以下で指摘しているように、3.x ブートストラップソリューションは次の とおりです。

$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});

https://jsfiddle.net/yohuLuj2/

2.x ブートストラップの古い回答:

リスト項目にクリック ハンドラーを追加し、その方法でナビゲーションを閉じることで、これを実行できるはずです。

$('.nav-collapse').click('li', function() {
    $('.nav-collapse').collapse('hide');
});

ここにjsfiddleがあります： http://jsfiddle.net/hajpoj/By6ym/4/

于 2013-01-10T02:38:42.963 に答える
33

次のように、各リンクで btn-navbar (data-toggle="collapse" data-target=".nav-collapse") の 2 つの属性を複製するだけです。

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
  </ul>
</div>
于 2014-02-15T12:31:40.010 に答える
11

ジェイソンのソリューションに追加したいのは、ドロップダウンの例外だけです。誰かがクリックしてサブメニューを切り替えるだけの場合は、メニューを閉じたくありません。だから…</p> 

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    $(".navbar-collapse").collapse('hide');
});
于 2014-08-08T16:49:24.350 に答える
8

@Mikeのドロップダウンソリューションは、ドロップダウントグル内のアイテムがメニューを非表示にしないことを除いて、私にとってはうまくいったので、これを追加するようにしました:

$('.navbar-collapse .dropdown-menu').click(function(){
    $(".navbar-collapse").collapse('hide');
});
于 2014-12-01T23:46:25.783 に答える
3

すべての Navbar ではなく、DOM ツリーをたどり、関連する Navbar を閉じることを忘れないでください。特に Bootstrap 3 では、次のコード スニペットのようなものを使用します。

$("body").on("click", ".navbar-collapse a", function() {
  var $this = $(this);

  setTimeout(function() {
     $this.closest(".navbar-collapse").collapse('hide');
  }, 350);
});
于 2013-12-16T04:09:17.643 に答える
3

もう1つの問題は、デスクトップにナビゲーションバーが表示されたときに、ナビゲーションバーを非表示/表示しようとするため、これを作成しました:

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    if($(window).width() < 768 )
        $('.navbar-collapse').collapse('hide');
});
于 2014-09-08T15:41:42.250 に答える
0

Angular を使用している場合は、折りたたみをルート ナビゲーションにバインドできます。

$scope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $(".navbar-collapse").collapse('hide'); });
于 2015-05-29T19:52:21.753 に答える