트위터 부트 스트랩 : 복수 응답 접이식 navs?

Question

트위터 부트 스트랩을 사용하고 있습니다. 모바일에서 볼 때 드롭 다운으로 축소되는 두 가지 이상의 탐색 기능이 필요합니다.

페이지에서 한 번만 쉽게 수행 할 수 있지만 여러 응답/접을 수있는 탐색 방법을 이해할 수 없습니다.

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">groups</a> 

<div class="nav-collapse"> 
    <ul class="nav"> 
    <li><a href="#">Nav Link</a></li> 
    <li><a href="#">Nav Link</a></li> 
    <li><a href="#">Nav Link</a></li> 
    <li><a href="#">Nav Link</a></li> 
    </ul> 
</div> 

그러나이 어떻게 제 2의 탐색을 할 수 있습니다 :

이 코드는 모바일 붕괴 한 탐색을 만들 작동?

이 코드를 복제하고 data-target=".nav-collapse"을 data-target=".nav-collapse2"으로 변경하려고 시도했지만 작동하지 않습니다.

Twitter Bootstrap은 페이지에 2 개 이상의 반응 형 탐색 기능을 제공합니까?

Answer 1

당신은 올바른 길을 가고 있습니다.

.nav-collapse은 내비게이션 축소를 실제로 수행하기 위해 부트 스트랩에 의해 내부적으로 사용됩니다. 대신 data-target로 .nav-collapse2를 사용하는

다음은 예입니다 (.nav-collapse을 사용하는 것 외에도) 자신의 클래스/ID를 사용 :

<a class="btn btn-navbar" data-toggle="collapse" data-target=".col1">groups</a> 
<a class="btn btn-navbar" data-toggle="collapse" data-target=".col2">groups2</a> 

<div class="nav-collapse col1"> 
    <ul class="nav"> 
     <li><a href="#">Nav Link</a></li> 
     <li><a href="#">Nav Link</a></li> 
    </ul> 
</div> 
<div class="nav-collapse col2"> 
    <ul class="nav"> 
     <li><a href="#">Nav Link2</a></li> 
     <li><a href="#">Nav Link2</a></li> 
    </ul> 
</div> 

가 여기 fiddle입니다.

Answer 2

나는 @ gurch101과 같은 것을 시작했다. 그런 다음이 메뉴를 사용하여 다른 메뉴를 숨 깁니다.

// Only show one navigation at a time 
jQuery(function($){ 
    $('.col1').on('show.bs.collapse', function(){ 
    var otherNav = $('.col2'); 
    if (otherNav.is(':visible')) { 
     otherNav.collapse('hide'); 
    } 
    }); 
    $('.col2').on('show.bs.collapse', function(){ 
    var otherNav = $('.col1'); 
    if (otherNav.is(':visible')) { 
     otherNav.collapse('hide'); 
    } 
    }); 
});