Twitter Bootstrap mobile nav: скрыть меню после нажатия ссылки меню

Ответ 1

Если вы используете BS3.x, вы можете свернуть мобильную навигацию с такой разметкой - обратите внимание на "привязку данных" и "цель данных" в разметке для домашней ссылки:

  <nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav">
      <li class="active">
        <a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a>
      </li>
      <li>

Вы также можете свернуть мобильный Nav через script следующим образом:

    <script>
      $('.navbar-collapse a').click(function (e) {
        $('.navbar-collapse').collapse('toggle');
      });
    </script>

Этот подход не требует абсолютно никакой дополнительной разметки. Каждый раз, когда ссылка нажимается на nav, она переключает навигационную панель.

Приветствия.

Ответ 2

Навигацию следует закрывать в любое время, когда пользователь щелкает в любом месте тела, а не только элементы навигации. Меню Say открыто, но пользователь нажимает на тело страницы. Пользователь ожидает закрытия меню.

Вы также должны убедиться, что кнопка переключения видна, в противном случае в меню отображается переход.

$(document).ready(function() { 

$("body").click(function(event) {
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
         if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
            $('.navbar-collapse').collapse('toggle');
        }
  });

});

Ответ 3

Самый простой способ, который я нашел, - использовать атрибуты данных на любых навигационных ссылках, где требуется свертывание мобильной навигационной панели. Используйте data-target=".navbar-collapse.in", чтобы навигационная панель переключилась только в открытое состояние, и не каждый раз, когда нажимается ссылка.

<a href="#link" data-toggle="collapse" data-target=".navbar-collapse.in">Link</a>

http://codeply.com/go/bp/lbIb5ZaHbq

Ответ 4

Пример разметки, например, Документация по загрузке:

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="example-auto-collapse">

Закрыть пункт меню нажмите

Добавьте к своему Javascript соответственно:

$('#example-auto-collapse').on('click', 'a:not(.dropdown-toggle)', function(e) {
    $('#example-auto-collapse.in').collapse('hide');
}

Альтернатива: Закройте с любым щелчком

Как и Чарли Далссас, рекомендуется было бы также закрыть меню при нажатии на странице. Для этого вы можете заменить Javascript выше следующим:

$('body').click(function(e) {
    // don't close when opening a sub-menu in our menu
    if(!$(e.target).filter('#example-auto-collapse .dropdown-toggle').length > 0) {
        $('#example-auto-collapse.in').collapse('hide');
    }
}

Даже чистая imo будет связывать и отвязывать этот обработчик, когда меню открывается/закрывается и не запускает обработчик напрасно при каждом нажатии на пользователя. Это вряд ли может иметь какое-либо заметное влияние.

Я создал учетную запись стека, чтобы ускорить ответ Skelly за его простоту. Затем я узнал, как нельзя пережить без репутации. Затем я узнал, как это решение ломает ScrollSpy. Теперь это решение, которое наилучшим образом подходит для меня без нежелательных побочных эффектов.

Ответ 5

В случае, если кто-либо еще заинтересован, я нашел решение в другом месте. Это красиво просто.

Добавьте этот идентификатор в свою разметку:

<nav class="nav-main nav-collapse collapse" id="hideonclick" role="navigation">

И добавьте это в свой JS:

$('#hideonclick a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
                if ($('.btn').is(":visible"))
                    $('.btn').click();
            });

Ответ 6

Имейте в виду, что подход для добавления атрибутов переключения данных и атрибутов данных к элементу привязки не работает с настроенным scrollspy. BS ScrollSpy больше не может активировать элемент меню.

Ответ 7

Если вы используете подменю, вам необходимо изменить код @user2562923 следующим образом:

        $('.navbar-collapse a').click(function (e) {
            if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
                $('.navbar-collapse').collapse('toggle');
            }
        });