Автоматическое закрытие адаптивной навигации

Ответ 1

Edit: Как показано ниже Maximus, решение 3.x bootstrap:

$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});

https://jsfiddle.net/yohuLuj2/

Старый ответ для 2.x bootstrap:

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

$('.nav-collapse').click('li', function() {
    $('.nav-collapse').collapse('hide');
});

Вот такой вопрос: http://jsfiddle.net/hajpoj/By6ym/4/

Ответ 2

Рабочее решение для начальной загрузки 3

$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});

Ответ 3

Я просто реплицирую 2 атрибута btn-navbar (data-toggle = "collapse" data-target = ". nav-collapse" ) для каждой ссылки, например:

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
  </ul>
</div>

Ответ 4

Единственное, что я хотел бы добавить к решению jason, - это исключение для выпадающих меню. Вы не хотите закрывать свое меню, если кто-то просто щелкает, чтобы переключить подменю. Так что...

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    $(".navbar-collapse").collapse('hide');
});

Ответ 5

Решение для раскрывающегося списка @Mike работало для меня, за исключением того, что элементы в раскрывающемся списке не скрывали меню, поэтому я обязательно добавил следующее:

$('.navbar-collapse .dropdown-menu').click(function(){
    $(".navbar-collapse").collapse('hide');
});

Ответ 6

Не забудьте пройти дерево DOM и закрыть связанный с ним Navbar, а не все Navbars. В частности, для Bootstrap 3 используйте что-то похожее на следующий фрагмент кода:

$("body").on("click", ".navbar-collapse a", function() {
  var $this = $(this);

  setTimeout(function() {
     $this.closest(".navbar-collapse").collapse('hide');
  }, 350);
});

Ответ 7

Еще одна проблема - когда вы видите навигационную панель на рабочем столе, она пытается скрыть/показать навигационную панель, поэтому я сделал следующее:

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    if($(window).width() < 768 )
        $('.navbar-collapse').collapse('hide');
});

Ответ 8

Я завершаю ответы, добавляя управление кнопкой:

$(document).on('click', '.navbar-collapse.collapse.in a:not(.dropdown-toggle)', function() {
    $(this).closest(".navbar-collapse").collapse('hide');
});
$(document).on('click', '.navbar-collapse.collapse.in button:not(.navbar-toggle)', function() {
    $(this).closest(".navbar-collapse").collapse('hide');
});

Ответ 9

Моя проблема заключалась в том, что я создавал макет страницы с якорями. Итак, когда вы уменьшаете размер окна, меню скрывается в ссылке, нажмите кнопку "отлично". Спасибо выше пользователю, который дал мне подсказку. Но при увеличении окна всегда происходит событие привязки (без перезагрузки). Итак, вот что я сделал. Надеюсь, это поможет кому-то:)

jQuery.noConflict();
(function($){
    $('ul#menu-menu-with-anchors li a, a[href="#top"]').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top - ($('body').hasClass('admin-bar') ? 160 : 130)
        }, 500);
        return false;
    });

    bindUnbindNavToggle($);
    $(window).resize(function(){
        bindUnbindNavToggle($);
    });

})(jQuery);

function bindUnbindNavToggle($){
    if( $('button.navbar-toggle').css('display') != 'none' ) {
        $('.navbar-collapse ul li a').on('click', function(){
           $('.navbar-collapse').collapse('hide');
            return false;
        });
    }
    else {
        $('.navbar-collapse ul li a').on('click', function(){
            return false;
        });
    }
}

Ответ 10

Если вы используете Angular, вы можете привязать свертывание к навигации по маршруту:

$scope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $(".navbar-collapse").collapse('hide'); });

Ответ 11

Проще говоря, этот код в main.js

 $(document).on('click', '.navbar-collapse.in', function (e) {
    if ($(e.target).is('a')) {
        $(this).collapse('hide');
    }
});

Ответ 12

Возможно, кому-то нужно скрыть меню, просто щелкнув мышью в другом месте (я предположил, что нет подменю). Затем просто добавьте этот код где-нибудь после jquery, bootstrap.js

$('button.navbar-toggle').focusout(function(){
        $(".navbar-collapse").collapse('hide');
    });