Bootstrap 3 Скрыть раскрывающееся меню на пункте меню Нажмите

Question

Check out the fiddle. У меня есть основная Bootstrap 3 отзывчивым нав так:

<div id="navbar" class="navbar navbar-fixed-top navbar-inverse"> 
     <div class="container"> 
      <a id="navbar-toggle" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 

      <a class="navbar-brand" href="#">Title Title Title</a> 

      <div id="nav-collapse" class="nav-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#option1">Option 1</a></li> 
        <li><a href="#option2">Option 2</a></li> 
        <li><a href="#option3">Option 3</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

СЧА элементы ссылки на разделы на странице, а не разных страниц, поэтому мне нужно ниспадающее меню, чтобы скрыть по щелчку.

Всякий раз, когда я пытаюсь переключить ниспадающее меню вручную с JQuery, он путает будущую функциональность кнопки переключения ниспадающего:

$("#navbar li a").click(function(event) { 
    // check if window is small enough so dropdown is created 
    $("#navbar-toggle").is(":visible") 
     $("#nav-collapse").toggle(); 
}); 

Есть ли лучше исправить это?

Answer 1

Если вы хотите, чтобы сделать это без JavaScript вы можете просто добавить данные-мишень и данных-переключатель к каждому элементу списка, например:

<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option1">Option 1</a></li> 
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option2">Option 2</a></li> 
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option3">Option 3</a></li> 

Для навигационной панели это действительно работает только в режиме мобильного просмотра, когда есть кнопка переключения. Странные вещи случаются при открытии навигационной панели (кнопка переключения не отображается).

Answer 2

Изменить это:

$(document).ready(function() { 
    $("#navbar li a").click(function(event) { 
     // check if window is small enough so dropdown is created 
     $("#navbar-toggle").is(":visible") 
      $("#nav-collapse").toggle(); 
    }); 
    }); 

к этому:

$(document).ready(function() { 
    $("#navbar li a").click(function(event) { 
     // check if window is small enough so dropdown is created 
    $("#nav-collapse").removeClass("in").addClass("collapse"); 
    }); 
}); 

См http://jsfiddle.net/fw7vh/4/

Answer 3

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

<li class="visible-xs"> 
    <a href="#" data-toggle="collapse" data-target=".navbar-collapse">Link</a> 
</li> 
<li class="hidden-xs"> 
    <a href="#">Link</a> 
</li> 

В принципе, есть две версии по ссылке, тот, который появляется всякий раз, когда переключатель меню (при ширине браузера < 768px), который будет переключать навигационное меню, и тот, который не сворачивает его (ширина браузера> 768 пикселей). Если вы не добавите этот второй тип, он будет показывать странную фантомную анимированную горизонтальную полосу прокрутки при попытке переключить меню, когда его там нет.

Answer 4

Я новичок в Bootstrap, но с небольшим измененным кодом выше он отлично работает сейчас. Помните, что когда вы нажимаете на логотип, выпадающее меню должно закрываться, поэтому я добавил к нему навигационный заголовок!

jQuery(document).ready(function() { 
     jQuery(".nav a, .navbar-header a").click(function(event) { 
       // check if window is small enough so dropdown is created 
       jQuery(".navbar-collapse").removeClass("in").addClass("collapse"); 
     }); 
}); 

Answer 5

С Bootstrap 3.3.4 Я понял, что мой старый способ бросить работу. Обновлено:

if ($('div.navbar-collapse').hasClass('in')) { 
    $('button.navbar-toggle:visible').click(); 
}