부트 스트랩 navbar 붕괴 - 클릭하여 닫기 닫기

Question

나는 이것이 멍청한 질문이라고 생각한다. 나는 멀리 또는 목록 항목 중 하나를 클릭하여 부트 스트랩 "navbar-collapse"를 닫으려고합니다. 나는이 어딘가에있는 코드를 발견하고 작동한다.

$(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 클래스를 사용하는 경우 메뉴 바

$(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 .collapse').collapse('hide'); 

이 아이들 모두 축소 요소를 숨 깁니다 navbar 클래스의