Twitter Загрузочный лоток: несколько реагирующих сбрасываемых навигаторов?

Question

Я использую Twitter Bootstrap. Я хочу иметь две (или более) навигационные системы, которые при просмотре на мобильных устройствах сворачиваются в выпадающее меню.

Это можно сделать один раз на странице, но я не могу понять, как иметь несколько адаптивных/сменных навигационных систем.

Этот код работает, чтобы создать один СЧА, который коллапсирует на мобильный телефон:

<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 используется внутренне бутстрапом, чтобы на самом деле заставить навигацию свернуть быстро. Вместо того чтобы использовать .nav-collapse2 как data-target, использовать свой собственный класс/идентификатор (в дополнение к использованию .nav-collapse)

Вот пример:

<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'); 
    } 
    }); 
});