Завантажте відповідне меню завантаження "на клацання"

Клацнувши на кнопці "ПРОДУКТИ", я пересуваю білий div (як показано в додатку). Коли використовується адаптивний (мобільний і планшетний ПК), я хотів би автоматично закрити адаптивну панель навігації та відображати лише білу смужку.

Я намагався:

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

також намагався:

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

І це працює. Однак у розмірі робочого столу він також називається і робить щось забавне в меню, де воно зменшується на секунду.

Будь-які ідеї?

У мене це працює з анімацією!

Меню в html:

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

Прив'язка події клацання до всіх елементів навігації до меню згортання (плагін згортання Bootstrap):

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

Вам не потрібно додавати додатковий javascript до того, що вже включено до опції згортання завантажувальних файлів. Натомість просто включіть селектори перемикання даних та цілі даних у пункти списку меню так само, як і за допомогою кнопки перемикання навігаційної панелі. Отже, для пункту меню "Товари" це виглядатиме так

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

Потім вам потрібно буде повторити селектори перемикання даних та цілі даних для кожного пункту меню

РЕДАКТУВАТИ !!! Для того, щоб виправити проблеми із переповненням і мерехтінням цього виправлення, я додаю ще трохи коду, який це виправить, і при цьому не матиме зайвого 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 : У bootstrap v4.1.3 я не міг використовувати видимі / приховані класи. Замість hidden-xsвикористання d-none d-sm-blockта замість visible-xsвикористання d-block d-sm-none.

Я думаю, що ви все по техніці ..

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

РЕДАГУВАТИ: Щоб подбати про підменю, переконайтеся, що на їх прив’язаному перемикачі є клас випадаючого перемикача.

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

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

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

Я не тестував його за допомогою вкладених випадаючих меню / меню, тому YMMV.

щоб бути повним, у Bootstrap 4.0.0-beta використання .show працювало для мене ...

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

Я припускаю, що у вас є такий рядок, який визначає область навігації, на основі прикладів Bootstrap та всього іншого

<div class="nav-collapse collapse" >

Просто додайте властивості як такі, як на кнопку MENU

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

Я також додав <body>, працював. Не можу сказати, що я його сформулював, або щось інше, але мені здається задоволенням ... поки ви не натиснете на випадкове місце інтерфейсу, щоб відкрити меню, так що це не так добре.

DK

Це працює, але не оживляє.

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

В HTML я додав клас СЧ посилання на в тезі кожного посилання навігації.

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

це рішення чудово працює на настільних ПК та мобільних пристроях.

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

Просто щоб пояснити рішення користувача1040259, додайте цей код у свій $ (документ) .ready (function () {});

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

Як вони вже згадують, це не оживляє хід ... але закриває панель навігації при виборі елемента

Для тих, хто використовує 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>

Це повинно зробити трюк.

Потрібен bootstrap.js.

Приклад => http://getbootstrap.com/javascript/#collapse

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

Це робить те саме, що додає атрибути 'data-toggle = "kolaps"' та 'href = "yournavigationID"' до тегів меню навігації.

Я використовую функцію 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');
                    }
                });

            });

Не найновіший потік, але я шукав рішення для тієї самої проблеми і знайшов один (поєднання деяких інших).

Я дав 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" у своїх навігаційних посиланнях! (Запуск AJAX Reguest.)

Результат: Якщо кнопка "видима", її "клацнули" ... Отже: Ніякої помилки, якщо ви використовуєте "повноекранний вигляд" Bootstrap (ширина понад 940 пікселів).

Привіт Ральф

PS: Він чудово працює з IE9, IE10 та Firefox 25. Не перевіряв інших - Але я не бачу проблеми :-)

Це спрацювало для мене. Я робив так, якби я натискав на кнопку меню, додаючи або видаляючи клас `` 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();
        }

    });

Ви обережно використовуєте

ul.nav {
    display: none;
}

Це за замовчуванням закриє панель навігації. Будь ласка, повідомте мене, якщо хтось знайде це корисним

Наприклад, якщо ваша піктограма з можливістю перемикання бачиться лише для дуже маленьких пристроїв, ви можете зробити щось подібне:

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

Натискання [data-toggle = "offcanvas"] додасть .hidden-xs bootstrap до мого # бічного меню, яке приховає вміст бічного меню, але знову стане видимим, якщо збільшити розмір вікна.

якщо меню 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();
    }
});

Туггл Nav Close, відповідь, сумісна з браузером IE, без помилок консолі. Якщо ви використовуєте bootstrap, використовуйте це

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

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

Рішення 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>