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

Проверьте скрипт. Я имею базовый Bootstrap 3 отзывчивый nav так:

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

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

ОТВЕТЫ

Ответ 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>

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

Ответ 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/

Ответ 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), которое переключает меню навигации, и тот, который не сворачивает его (ширина браузерa > 768 пикселей). Если вы не добавите этот второй тип, при попытке переключить меню, когда оно там не будет, будет отображаться странная горизонтальная полоса прокрутки phantom.

Ответ 4

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

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

Ответ 5

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

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