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

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

15
drop-down-menu jquery responsive-design twitter-bootstrap uinavigationbar

5 ответов

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

<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>

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

24

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

$(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/

8

Я не знаю, почему нажатие / нажатие на пункт меню в раскрывающемся меню в свернутой navbar не автоматически переключает меню в 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). Если вы не добавляете этот второй тип, он покажет странную фантомную анимированную горизонтальную полосу прокрутки при попытке переключить меню, когда его нет.

3

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

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

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

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