2014-02-10 5 views
5

Я использую несколько пунктов в моей самозагрузке 3 навигационной панели, сгруппированной в, как показано ниже:Programatically переключения начальной загрузки 3 Панели навигации

<nav class="navbar navbar-inverse navbar-fixed-top" id="toggleNav" role="navigation"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand name</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse">     
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="javascript:logout();"><span class="glyphicon glyphicon-log-out"></span>&nbsp;Logout</a> 
       </li> 
       <li> 
        <a href="#" id="online-offline" toggle="offline"><span class="glyphicon glyphicon-off"></span>&nbsp;Go offline</a> 
       </li> 
      </ul>     
     </div><!-- /.navbar-collapse --> 
    </nav> 

Когда я щелкаю по второму вопросу («Go форума») Я использую JQuery для вызова модальное окно. На мобильном устройстве мне нужно сначала свернуть меню, чтобы перейти к ссылке, а затем, когда я нажму на этот элемент, я получу свое модальное окно правильно.

Что мне нужно для достижения - это скрыть крах навигатора перед показом модального. Можно ли программно переключить сбой на навигационной панели? Как я могу это сделать ?

Флорин.

ответ

8

После небольшой помощи от @ Jahnux73 я сам это понял. Так что единственное, что я должен был сделать, это добавить:

data-toggle="collapse" data-target=".navbar-ex1-collapse" 

к конкретной ссылке, которую я хотел, чтобы переключить Navbar. поэтому ссылка теперь выглядит следующим образом:

<a href="#" id="online-offline" data-toggle="collapse" 
    data-target=".navbar-ex1-collapse" toggle="offline"> 
    <span class="glyphicon glyphicon-off"></span>&nbsp;Go offline 
</a> 
+3

Не забудьте принять ваш ответ ^^ – pbenard

12

Как вы сказали, мероприятие будет проходить модально.

Таким образом, когда ваш модальный (так называемый yourModal) показывает (перед показом), просто скрыть меню:

JS:

$('.yourModal').on('show.bs.modal', function(){ 
    $('.navbar-collapse').collapse('hide'); 
}); 

Вот документы:

http://getbootstrap.com/javascript/#collapse

http://getbootstrap.com/javascript/#modals-usage

+0

Я попробую. благодаря! – bboydflo

Смежные вопросы