Bootstrap закрыть отзывчивое меню " по щелчку мыши"

Question

Bootstrap закрыть отзывчивое меню " по щелчку мыши"

на" продукты " нажмите я скользить вверх белый div (как показано в приложении). Когда в responsive (mobile и tablet), я хотел бы автоматически закрыть отзывчивую навигационную панель и показывать только белую полосу.

пробовал:

$('.btn-navbar').click();

тоже пробовал:

$('.nav-collapse').toggle();

и это работает. Однако в размере рабочего стола он также называется и делает что-то фанки в меню, где он сжимается на секунду.

какие идеи?

19 77

javascript html css twitter-bootstrap

19 ответов:

вам не нужно добавлять дополнительный javascript к тому, что уже включено в опцию коллапса bootstraps. Вместо этого просто включите селекторы data-toggle и data-target в элементы списка меню так же, как вы это делаете с помощью кнопки navbar-toggle. Так что для вашего пункта меню продуктов это будет выглядеть так
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
затем вам нужно будет повторить селекторы data-toggle и data-target для каждого пункта меню

редактировать!!! Для того, чтобы исправить проблемы переполнения и мерцание на этом исправлении я добавляю еще немного кода, который исправит это и все еще не имеет никакого дополнительного javascript. Вот новый код:
<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
вот он на работе http://jsfiddle.net/jaketaylor/84mqazgq/

это сделает ваши переключатели и целевые селекторы специфичными для размера экрана и устранит сбои в большем меню. Если у кого-то все еще есть проблемы с глюками, пожалуйста, дайте мне знать, и я найду исправление. Спасибо

124

Я думаю, что вы над всеми инженерными..
    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });
EDIT: чтобы позаботиться о подменю, убедитесь, что их якорь переключения имеет выпадающий класс переключения на нем.
    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });
правка 2: Добавлена поддержка для телефонов с сенсорным.
    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

38

мне очень понравилась идея Джейка Тейлора сделать это без дополнительного JavaScript и воспользоваться переключателем коллапса Bootstrap. Я обнаружил, что вы можете исправить проблему "мерцания", когда меню не находится в свернутом режиме, изменив data-target селектор слегка включить in класса. Так это выглядит так:
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
Я не тестировал его с вложенными выпадающими меню / меню, так что YMMV.

34

это работает, но не анимировать.
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

4

Я предполагаю, что у вас есть такая строка, определяющая область навигации, основанная на примерах Bootstrap и все
<div class="nav-collapse collapse" >
просто добавьте свойства как таковые, как на кнопке меню
<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">
я добавил к <body> Как хорошо, работал. Не могу сказать, что я нашла его, но мне кажется лечить...пока вы не нажмете на случайное место пользовательского интерфейса, чтобы открыть меню, так что не так хорошо, что.

DK

4

просто чтобы быть полным, в Bootstrap 4.0.0-beta с помощью .показать работал для меня...
<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>

4

в HTML я добавил класс nav-link до a - тег для каждой навигационной ссылке.
$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);

3

это решение имеет прекрасную работу, на рабочем столе и мобильных устройствах.
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">

3

просто чтобы изложить решение user1040259, добавьте этот код в свой $(документ).готовые(функция() {});
    $('.nav').click( function() {
        $('.btn-navbar').addClass('collapsed');
        $('.nav-collapse').removeClass('in').css('height', '0');
    });
как они упоминают, это не оживляет движение... но он закрывает навигационную панель при выборе элемента

2

для тех, кто использует AngularJS и угловой маршрутизатор UI с этим, вот мое решение (используя переключатель mollwe). Где." шапку-главная-крах" мой "данные-цель".

создать директиву:
module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'C',
        link: function (scope, element) {
            //watch for state/route change (Angular UI Router specific)
            $rootScope.$on('$stateChangeSuccess', function () {
                if (!element.hasClass('collapse')) {
                    element.collapse('hide');
                }
            });
        }
    };
}]);
Директива Использовать:
<div class="collapse navbar-collapse navbar-main-collapse">
    <your menu>

2

Я использую функцию mollwe, хотя я добавил 2 улучшения:

A) избегайте закрытия выпадающего списка, если щелкнутая ссылка свернута (включая другие ссылки)

b) скрыть выпадающий список тоже, если вы нажимаете на видимый веб-контент.
jQuery.fn.exists = function() {
                  return this.length > 0;
              }

    $(function() {
                var navMain = $(".navbar-collapse");
                navMain.on("click", "a", null, function() {
                    if ($(this).attr("href") !== "#") {
                        navMain.collapse('hide');
                    }
                });

                $("#content").bind("click", function() {
                     if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
                        navMain.collapse('hide');
                    }
                });

            });

1

не самый Новый Поток, но я искал решение для той же проблемы и нашел один (смесь некоторых других).

Я дал NavButton:
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
идентификатор / идентификатор типа:
 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
не самая лучшая "идея" - но: работает для меня! Теперь вы можете проверить видимость вашей кнопки (с помощью jquery), например:
 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }
(Примечание: это просто код отрезал ! Я использовал событие "onclick" на своих навигационных ссылках! (Начиная с "Аяксом" Желанию.)

результат: если кнопка " видна "он получил "нажал"... Итак: нет ошибки, если вы используете "полноэкранный вид" Bootstrap (ширина более 940px).

приветы Ральф

PS: он отлично работает с IE9, IE10 и Firefox 25. Не проверил других - но я не вижу проблемы : -)

1

Это должно сделать трюк.

требуется bootstrap.js.

Пример =>http://getbootstrap.com/javascript/#collapse
    $('.nav li a').click(function() {
      $('#nav-main').collapse('hide');
    });
это делает то же самое, что и добавление атрибутов 'data-toggle="collapse"' и 'href="yournavigationID" к тегам меню навигации.

1

это сработало для меня. Я сделал, как, когда я нажимаю на кнопку Меню, я добавляю или удаляю класс "in", потому что, добавляя или удаляя этот класс, переключатель работает по умолчанию. "e. stopPropagation ()" - это остановить анимацию по умолчанию с помощью bootstrap(я думаю) вы также можете использовать "toggleClass" вместо добавления или удаления класса.

$('#ChangeToggle').on ('click', function (e) {
        if ($('.navbar-collapse').hasClass('in')) {
            $('.navbar-collapse').removeClass('in');
            e.stopPropagation();
        } else {
            $('.navbar-collapse').addClass('in');
            $('.navbar-collapse').collapse();
        }

    });

1

вы cau использовать
ul.nav {
    display: none;
}
это будет по умолчанию закрыть панель навигации. Пожалуйста, дайте мне знать, кто-нибудь находит это полезным

0

если, например, ваш значок переключения виден только для очень маленьких устройств, то вы можете сделать что-то вроде этого:
$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});
щелчок [data-toggle= "offcanvas"] добавит bootstrap.скрытый-xs в мое # боковое меню, которое скроет содержимое бокового меню, но снова станет видимым, если вы увеличите размер окна.

0

Если меню html
<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
</div>
on nav toggle' in ' класс добавляется и удаляется из переключателя. проверьте, открыто ли отзывчивое меню, а затем выполните переключатель закрыть.
$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

0

$('.navbar-toggle').trigger('click');

-1

mollwe · Accepted Answer · 2017-02-15 06:47:25

я получил его для работы с анимацией!

меню в html:
<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>
привязка нажмите событие на все элементы в навигации, чтобы свернуть меню (Bootstrap collapse plugin):
 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });
EDIT Чтобы сделать его более общим, мы можем использовать следующий фрагмент кода
 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });