it-roy-ru.com

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

При нажатии «ПРОДУКТЫ» я сдвигаю белый div (как показано в приложении). При работе в адаптивном режиме (на мобильном устройстве и планшете) я хотел бы автоматически закрыть адаптивную навигационную панель и отображать только белую полосу. 

Я старался:

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

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

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

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

Есть идеи?

enter image description here

80
user1040259

У меня есть это для работы с анимацией!

Меню в формате HTML:

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

Привязка события клика ко всем элементам в навигации, чтобы свернуть меню (плагин Bootstrap collapse):

 $(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');
     });
 });
90
mollwe

Вам не нужно добавлять какой-либо дополнительный javascript к тому, что уже включено в опцию коллапса начальной загрузки. Вместо этого просто включите переключатели data-toggle и data-target в элементы списка меню, как вы делаете это с помощью кнопки-переключателя navbar. Так что для вашего пункта меню «Продукты» это будет выглядеть так

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

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

EDIT: в начальной загрузке v4.1.3 я не мог использовать видимые/скрытые классы. Вместо hidden-xs используйте d-none d-sm-block, а вместо visible-xs используйте d-block d-sm-none.

128
Jake Taylor

Я думаю, что вы все закончены инженерные ..

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

Правка: Чтобы позаботиться о подменю, убедитесь, что на их привязке есть класс dropdown-toggle.

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

Правка 2: Добавить поддержку для телефона Touch.

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });
38
Hontoni

Мне очень понравилась идея Джейка Тейлора сделать это без дополнительного JavaScript и воспользоваться преимуществом коллапса Bootstrap. Я обнаружил, что можно устранить проблему «мерцания», когда меню не находится в свернутом режиме, слегка изменив селектор data-target, добавив в него класс in. Так это выглядит так:

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

Я не проверял это с помощью вложенных выпадающих меню/меню, так что YMMV.

34
Luke Tillman

просто чтобы быть полным, в Bootstrap 4.0.0-бета с использованием .show работал для меня ...

<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
7
vidriduch

Это работает, но не оживляет.

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
4
user1040259

Я предполагаю, что у вас есть такая строка, определяющая область навигации, основанная на примерах Bootstrap и всех

<div class="nav-collapse collapse" >

Просто добавьте свойства как таковые, как на кнопке MENU

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

Я также добавил в <body>, работал. Не могу сказать, что я это профилировал или что-то в этом роде, но мне кажется, что это удовольствие ... пока вы не нажмете на случайное место в интерфейсе, чтобы открыть меню, так что это не так хорошо. 

DK

4
Douglas 'DK' Knudsen

В HTML я добавил класс нав-ссылка к  тег каждой навигационной ссылки.

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);
3
Jason Swingen

это решение отлично работает как на настольном, так и на мобильном устройствах.

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">
3
bp002

Для тех, кто использует AngularJS и Angular UI Router с этим, вот мое решение (с помощью переключателя mollwe) . Где «.navbar-main-collapse» - это моя «цель данных».

Создать директиву:

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
Kyle

Просто, чтобы разобраться с решением пользователя user1040259, добавьте этот код в ваш $ (document) .ready (function () {}); 

    $('.nav').click( function() {
        $('.btn-navbar').addClass('collapsed');
        $('.nav-collapse').removeClass('in').css('height', '0');
    });

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

2
CharlesA

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

Я дал 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» в своих ссылках Nav! (Запуск AJAX Reguest.)

В результате: если кнопка «видима», ее «нажали» ... Итак: никаких ошибок, если вы используете «полноэкранный режим» Bootstrap (ширина более 940 пикселей).

Привет Ральф

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

1
Ralph D.

Это сработало для меня. Я сделал, как, когда я нажимаю на кнопку меню, я добавляю или удаляю класс «в», потому что, добавляя или удаляя этот класс, тумблер работает по умолчанию. 'e.stopPropagation ()' - остановить анимацию по умолчанию при начальной загрузке (я думаю), вы также можете использовать '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
Goutami

Это должно сделать свое дело.

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

Пример => http://getbootstrap.com/javascript/#collapse

    $('.nav li a').click(function() {
      $('#nav-main').collapse('hide');
    });

Это аналогично добавлению атрибутов data-toggle = "collapse" и href = "yournavigationID" в теги навигационных меню.

1
Jussi Järviö

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

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

б) Скройте также раскрывающийся список, если вы нажимаете на видимый веб-контент.

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

Решение Bootstrap 4 без Javascript

Добавьте атрибуты data-toggle="collapse" data-target="#navbarSupportedContent.show" в div <div class="collapse navbar-collapse"> 

Убедитесь, что вы указали правильный id в data-target

<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">

.show, чтобы избежать мерцания меню в больших разрешениях

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

0
kiranvj

Tuggle Nav Close, IE совместимый с браузером ответ, без какой-либо ошибки консоли . Если вы используете загрузчик, используйте этот

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})
0
Super Model

если меню HTML 

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
</div>

on nav Переключатель класса «in» добавляется и удаляется из переключателя. проверьте, открыто ли адаптивное меню, затем переключите его.

$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});
0
Aamer Shahzad

Если, например, ваш значок переключения виден только для очень маленьких устройств, то вы можете сделать что-то вроде этого:

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

Нажатие [data-toggle = "offcanvas"] добавит загрузчик .hidden-xs в мой каталог # side-menu, который будет скрывать содержимое бокового меню, но снова станет видимым, если вы увеличите размер окна.

0
Kingsley Ijomah

Вы используете 

ul.nav {
    display: none;
}

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

0
Kris