ブートストラップnavbar崩壊 - クリックして閉じる方法

Question

これはノブの質問だと思います。私はブートストラップ "navbar-collapse"をクリックするか、リストアイテムの1つをクリックして閉じるようにします。私はこのコードをどこかに見つけ、それが動作します。

$(document).on('click',function() { 
    $('.collapse').collapse('hide'); 
}); 

しかし、このコードでは、ブートストラップの「パネル崩壊」要素をクリックして閉じることができます。もちろん、これは起こりたくありません。

このコードを「navbar-collapse」要素に対してのみ機能させる方法を指定するにはどうすればよいですか？

Answer 1

は、あなたのナビゲーションバーの崩壊要素に新しいクラスを与え、内側にそれを割り当てる：あなたは、古いクラスを削除せずにナビゲーションバーの崩壊要素にそのクラスを追加

$('.NewClassName').collapse('hide'); 

注意を。

Answer 2

コードは正しいです。

上記には私のために奇妙な動作が表示され、時にはスクロールバーがナビに表示されることがありました。それはいくつかの派手なCSSからかもしれませんが、以下は私のためにそれを修正しました。

$(document).on('click',function(e){ 
    if($('#navbar-collapse').hasClass('in')){ 
    $('.collapse').collapse('hide'); 
    } 
}) 

また、あなたがあなたのファイルに

<script src="/js/bootstrap.min.js"></script> 

を持っていることを確認してください。

Answer 3

ナビゲーションバーの外側をクリックしているかどうかを確認してください。

$('.navbar .collapse').collapse('hide'); 

これは、子であるすべての崩壊の要素を非表示になります：折りたたみメソッドを使用すると、ブートストラップnavbarクラスを使用している場合、あなたは、単に行うことができますナビゲーションバー

$(document).click(function (event) { 
    var target = $(event.target); 
    var $navbar = $(".navbar-collapse");    
    var opened = $navbar.hasClass("in"); 
    if (opened === true && !target.hasClass("navbar-toggle")) {  
     $navbar.collapse('hide'); 
    } 
}); 

Answer 4

に私達の参照を使用して予想通り焼成することができますnavbarクラスの