Згорнене меню Bootstrap 3 не закривається при натисканні

122

У мене є більш-менш стандартна навігація з завантажувальної програми 3

<body data-spy="scroll" data-target=".navbar-collapse">
    <!-- ---------- Navigation ---------- -->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="index.html"> <img src="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                </ul>
            </div>
        </div>
    </div>

На менших пристроях він нормально руйнується. Натискання на кнопку меню розширює меню, але якщо я натискаю (або торкаюся цього питання) посилання на меню, меню залишається відкритим. Що мені робити, щоб знову його закрити?

html  css  twitter-bootstrap  navigation 
— Параноїя
джерело
5
відповідь user3669917, безумовно, найпростіша і найпростіша відповідь вперед!
— Томас
1
— Inanc Gumus

Відповіді:

48

Налаштування Bootstrap за замовчуванням - це тримати меню відкритим при натисканні на пункт меню. Ви можете вручну змінити цю поведінку, натиснувши .collapse('hide');на елемент jQuery, який потрібно згортати.

— VCNinc
джерело
8
Це неправильно, завантажувальний перемикач автоматично переключає клас "згортання". Вам не потрібен додатковий код jquery. Якщо у вас така поведінка, це означає, що у вашому html-коді щось не так (зі свого боку, я два рази включав jquery та bootstrap, див. Відповідь @raisercostin).
— RomOne
@RomOne Ця відповідь правильна. Bootstrap зовсім НЕ закриває меню після заслання клацнув за замовчуванням. Інша відповідь застосовується лише в тому випадку, якщо люди неправильно включають jQuery двічі, що не є правильною відповіддю на це питання.
— Зім
136

Просто, щоб поділитися цим рішенням на GitHub, ця популярна відповідь:

https://github.com/twbs/bootstrap/isissue/9013#issuecomment-39698247

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

Це підключено до документа, тому вам не доведеться робити це готовим чином () (ви можете динамічно додавати посилання до свого меню, і воно все ще буде працювати), і воно викликається лише у випадку, якщо меню вже розширено. Деякі люди повідомили про дивне миготіння, де меню відкривається, а потім одразу закривається іншим кодом, який не підтвердив, що в меню було клас "in".

[ОНОВЛЕННЯ 2014-11-04] Очевидно, що під час використання підменю вищезазначене може спричинити проблеми, тому вищезгадане змінено на:

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
— Кевін Нельсон
джерело
1
Працює бездоганно. Дякую, що поділились!
— Родріго Чьонг
Чи можете ви пояснити '$ (це) .collapse (' приховати ');' будь ласка. я не розумію, звідки походить "крах"
— timebandit
@ImranNazir, вибачте, це спосіб після запитання, але collapseце метод, визначений bootstrap і приєднаний до об’єкта jQuery ... імовірно, вони повторно використовують це для декількох цілей (акордеон, навибар
— Кевін Нельсон
Оновлений код працював на мене, відповідей вище цього не було. Дякую!
— RandomUs1r
"[ОНОВЛЕННЯ 2014-11-04]" спрацювало. Що стосується іншого рішення, де рекомендується видалити дублікат посилання на bootstrap.js та jquery, що не є необхідним рішенням. Я знайшов це рішення, щоб виправити проблему з меншим часом талії на налагодження та з більш чітким поведінкою. Дякую!. Я сподіваюся, що це допомагає вам, як і мені.
— Nour Lababidi
122

Змініть це: 

<li><a href="#one">One</a></li>

до цього:

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

Ця проста зміна спрацювала для мене.

Посилання: https://github.com/twbs/bootstrap/isissue/9013

— FullStackDev
джерело
14
Це рішення добре для мобільного перегляду, але воно показує анімацію показу / приховування на великих екранах після натискання посилання.
— Айман Аль-Абсі,
22
@ AymanAl-ABSI Ви повинні додати .inв кінець data-targetзначення: data-target=".navbar-collapse.in". З коментаря у цій відповіді: stackoverflow.com/a/21797534/89818
— caw
це чудово працює для мене, але він порушує скруппі, будь-яка ідея, чому це може бути?
— Крейг Харлі
1
Працював для мене, коли був оновлений вище код з відповіддю @caw. Я також використовую функцію scrollspy.
— Нірай
Це, безумовно, найкраще рішення. Ні JavaScript, ні jQuery. Якщо ви хочете, щоб певне посилання зберігало меню відкритим, просто не додайте ці параметри. Слід вказати як найкращу відповідь. Дякую.
— ed1nh0
55

У мене була така ж проблема, але викликана включенням двічі bootstrap.js та jquery.jsфайлів.

Одним клацанням миші подія двічі оброблялася обома екземплярами jquery. Один закрився, а один відкрив перемикач.

— рейдеркостін
джерело
3
У мене була та сама проблема, але я не розумів, що їх включають двічі. Дякуємо, що опублікували це!
— Брайан ONeil
2
Так само зробив наш стажер. Дякуємо, що опублікували це.
— Тейсман
2
Людина! Я зробив те саме - я думаю, я повернувся до стажування!
— Приємніше
2
Так корисно! Я працював над цим цілими днями. Це може бути дуже часто при використанні шаблону навбар. Будьте уважні люди! :)
— Метт Батлер
2
Це слід відзначити як найкращу відповідь. У мене була та сама проблема з видаленням bootstrap.js, що вирішив проблему
— katwekibs
17 
$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

Це допоможе в обробці спаду в навігаційній смузі

— Чакрадхар Виза
джерело
Це вирішило мою проблему, коли використання завантажувальної програми з javascript від слайд-шоу jssor створювало проблеми. Цей код також створює класний ефект при розширенні та згортанні мобільного меню.
— Адам Вест
Дякую @Chakradhar, це врятувало мені час.
— Омар Бахір
Дякую, забув, що Laravel 5.5 JS включає B і Jquery в основний файл js.
— Джек Віал
12

У мене виникли / були подібні проблеми з Bootstrap 4, alpha-6, і відповідь Йоакима Йохансона вище почала мене в правильному напрямку. Не потрібно JavaScript. Введення даних-target = ". Navbar-крах" і data-toggle = "згортання" в тег div всередині nav, але оточуючи посилання / кнопки, працювало для мене.

<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
   <a class="nav-item nav-link" href="#">Menu Item 1</a>
   ...
</div>
Розгорніть фрагмент

— Пол
джерело
Ваша посада мені дуже допомогла. Це вирішило це для мене <body data-toggle = "згортання" data-target = ". Navbar-kolaps">
— Дес
Це було вже розміщено 3 роки тому. Крім того, він порушує анімацію в немобільному перегляді.
— Бевор
6

Я знаю, що це питання для Bootstrap 3, але якщо ви шукаєте рішення для Bootstrap 4 , просто зробіть це:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
— Сид
джерело
Я використовую бета-версію BS4, і ваш код відмінно працює. Я спробував усі інші запропоновані рішення тут не пощастило. BS4, очевидно, досить змінився, що інші рішення просто не застосовуються.
— Велосипед Дейв
Для релевантності та збереження рівноправності з оновленою інформацією - Це має бути найкращою відповіддю.
— Рікі
@ Ricky OP вказав Bootstrap 3, а не 4.
— Malavos
Для меню зі спаданнями я використав це:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
— Джеймс Вілкінс
5

У мене була така ж проблема, якою я користувався jQuery-1.7.1і bootstrap 3.2.0. Я змінив свою версію jQuery на останню ( jquery-1.11.2) версію, і все працює добре.

— Дензол
джерело
4

Хоча рішення, розміщене раніше про зміну самого пункту меню, як нижче, працює, коли меню знаходиться на невеликому пристрої, воно має побічний ефект, коли меню на повну ширину і розширене, це може призвести до того, що горизонтальна смуга прокрутки ковзатиме по вашому пункти меню . Рішення javascript не мають цього побічного ефекту.

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

(вибачте, що відповів так, хотів додати коментар до цієї відповіді, але, схоже, у мене недостатньо кредиту, щоб зробити зауваження)

— Вім Ван Хотс
джерело
2 
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
— Чит
джерело
перевірити нову версію Matthias S :-)
— Чіт
@bfontaine По-перше, ви повинні додати ідентифікатор у свій меню div, а коли ви натиснете на своє меню, то після цього все меню буде приховано. Наприклад: - Якщо ви натиснете на меню про нас, тоді вкладка меню відпочинку буде прихована.
— Чіт
1
дякую, але напишіть це у своїй відповіді;)
— bfontaine
1

Якщо ви хочете вручну змінити цю поведінку, зателефонувавши .collapse ('сховай') у директиву кутового, ось код:

файл JavaScript:

angular
  .module('yourAppModule')
  .directive('btnAutoCollapse', directive);

function directive() {
  var dir = {
    restrict: 'A',
    scope: {},
    link: link
  };
  return dir;

  function link(scope, element, attrs) {    
    element.on('click', function(event) {              
      $(".navbar-collapse.in").collapse('hide');
    });
  }
}

Html: 

<li class="navbar-btn">
     <a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>
— Мірна Де Ісус
джерело
1

Будь ласка, переконайтеся, що ви використовуєте останню версію bootstrap js. Я зіткнувся з тією ж проблемою і просто оновлення файлу bootstrap.js з bootstrap-3.3.6 зробило магію.

— Аман Арун
джерело
1

Якщо ви хочете, щоб ваша навігація перемикалася лише під час використання на екрані мобільного телефону, просто додайте data-toggle="collapse"іdata-target="#navbar" елементи будуть працювати на екрані мобільного пристрою, але дадуть вам дивне мерехтіння при натисканні на екран робочого столу. Рішення jQuery не працюють добре, якщо ви перебуваєте в середовищі Аурелія або Кут.

Найкращим рішенням для мене було створення спеціального атрибута, який слухає відповідний медіа-запит і додає в data-toggle="collapse"атрибут за бажанням:

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

Спеціальний атрибут з Aurelia виглядає приблизно так:

import {autoinject} from 'aurelia-framework';

@autoinject
export class CollapseToggleIfLess768CustomAttribute {
  element: Element;

  constructor(element: Element) {
    this.element = element;
    var mql = window.matchMedia("(min-width: 768px)");
    mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList));
    this.handleMediaChange(mql);
  }

  handleMediaChange(mediaQueryList: MediaQueryList) {
    if (mediaQueryList.matches) {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (dataToggle) {
        this.element.attributes.removeNamedItem("data-toggle");
      }
    } else {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (!dataToggle) {
        var dataToggle = document.createAttribute("data-toggle");
        dataToggle.value = "collapse";
        this.element.attributes.setNamedItem(dataToggle);
      }
    }
  }
}
Розгорніть фрагмент

— галло
джерело
0

Я виявив, що після довгої боротьби, спроб та помилок найкраще рішення для мене на jsfiddle. Посилання на натхнення на jsfiddle.net . Я використовую навигаційний пристрій завантажувача bootstrap з фіксованим верхом із згортанням та перемиканням гамбургерів. Ось моя версія на jsfiddle: jsfiddle Scrollspy navbar . Я отримував лише основні функціональні можливості, використовуючи інструкції на getbootsrap.com. Для мене проблема здебільшого полягала в туманних напрямках і js, рекомендованих сайтом getbootstrap. Найкращою мірою було те, що додавання цього додаткового біта js (який включає частину того, що згадується у вищезазначених потоках) вирішило для мене кілька проблем Scrollspy, зокрема:

  1. Згорнене / переключене меню nav ховається, коли натискається навігаційний розділ (наприклад, href = "# foobar") (проблема, що стосується цієї теми).
  2. Активний "розділ" було успішно виділено (тобто. Js успішно створено class = "active")
  3. Роздратована вертикальна смуга прокрутки, виявлена ​​на згорнутому навігаційному каналі (лише на невеликих екранах), була усунена.

ПРИМІТКА. У коді js, показаному нижче (із другого посилання jsfiddle в моєму дописі):

topMenu = $ ("# myScrollspy"),

... значення "myScrollspy" повинне відповідати ідентифікатору id = "" у вашому HTML-коді так ...

<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">

Звичайно, ви можете змінити це значення на будь-яке значення, яке вам подобається.

— Адам Каліхман
джерело
0

Все, що вам потрібно, це дані-target = ". Navbar-згортання" у кнопці, нічого іншого.

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
— Мародо
джерело
+1: Це також працює, додавши data-toggle = "згортання" data-target = ". Navbar-згортання" в <a /> або в моєму випадку <Link /> в Meteorjs з React, Дякую.
— Джо Л.
так, він працює, <a/>але він не працював <NavLink/>, він руйнується, але, <NavLink/>вже не працює, ідеї чому?
— Піраміда
0

Це код, який працював для мене:

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})
— Родді П. Карбонелл
джерело
0

У мене була така ж проблема: переконайтеся, що bootstrap.js включений у вашу html-сторінку. У моєму випадку меню відкрилося, але не закрилося. Як тільки я включив файл js bootstrap, все просто працювало.

— Елітміар
джерело
0

Простий Спробуйте зробити функцію в javascript для класу згортання, що випадає.

Приклад:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

    $timeout(function(){
        $scope.preLoader = false;
        $(document).ready(function() {
            $("#dropdown-element").toggleClass('show');
        });
    },100);

};

Підключіть цю функцію до onClickпростих робіт для мене.

— yasir_mughal
джерело
0

У мене була подібна проблема, але моя не залишилася б відкритою, вона відкриється / закриється швидко, я виявив, що у мене завантажувався jquery-1.11.1.min.js перед bootstrap.min.js. Тож я змінив порядок цих 2 файлів і виправив своє меню. Зараз працює бездоганно. Сподіваюся, це допомагає

— Васько
джерело
0

Проблема може полягати в тому, що ви використовуєте застарілі версії bootstrap або jquery, АБО ви називаєте більше однієї версії під час розмітки.

Просто зберігайте останні версії, вам потрібна лише одна посилання. Вирішує проблему.

— Нік
джерело
0

ви можете просто переконатися, що ви завантажуєте jQuery і Bootstrap.min.js ATF. Ваша навігація - це перше, що потрібно відобразити на сторінці, тому якщо у вас є сценарії в нижній частині HTML, ви втрачаєте будь-яку функціональність JavaScript.

— Кріс Джонсон
джерело
0

У мене була та сама проблема лише для мобільних пристроїв, але для програми Angular, і це я зробив:

app.component.html

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="col-md-12">
      <div class="navbar-header page-scroll">
      <button id ="navButton" style="color:red"type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" routerLink="/"><img id="navbrand" class="site-logo"  src="assets/img/yayaka_logo.png"/></a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <li class="dropdown" appDropdown>
          <a class="dropdown-toggle" style="cursor: pointer;">
            ΤΙ ΕΙΝΑΙ ΤΟ yayaka<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a (click) = "closeMenu()" href="/#about">About</a></li>
            <li><a (click) = "closeMenu()" href="/#services">Services</a></li>
          </ul>
        </li>
        <li class="page-scroll">
          <a (click) = "closeMenu()" routerLink="/profiles"><strong>Profiles</strong></a>
        </li>
      </ul>
    </div>
  </div>
  </div>
</nav>

app.component.ts 

 closeMenu() {
    var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
    if (isMobile) {
      document.getElementById('navButton').click();
    }
  }

Сподіваюся, це допомагає :)

— статула
джерело
-2

Моє меню не стандартне, але мені вдалося автоматично згортати шахту, використовуючи функцію "onclick" та ".click ()".

<div class="main-header">
    <div class="container">
        <div id="menu-wrapper">
            <div class="row">

                <div class="logo-wrapper col-lg-4 col-md-6 col-sm-7 hidden-xs">

                </div> <!-- /.logo-wrapper -->

                <div class="logo-wrapper2 visible-xs col-xs-9">

                </div> <!-- /.smaller logo-wrapper -->

                <div class="col-lg-8 col-md-6 col-sm-5 col-xs-3 main-menu text-center">
                    <ul class="menu-first hidden-md hidden-sm hidden-xs">
                        <li class="active"><a href="#">item1</a></li> |
                        <li><a href="#our-team">item2</a></li> |
                        <li><a href="#services">item3</a></li> |
                        <li><a href="#elia">item4</a></li> |
                        <li><a href="#portfolio">item5</a></li> |
                        <li><a href="#contact">item6</a></li>
                    </ul>
                    <a href="#" class="toggle-menu visible-md visible-sm visible-xs"><i class="fa fa-bars"></i></a>
                </div> <!-- /.main-menu -->
            </div> <!-- /.row -->
        </div> <!-- /#menu-wrapper -->
        <div class="menu-responsive hidden-lg">
            <ul>
                <li class="active" onclick = $(".toggle-menu").click();><a href="#">item1</a></li>
                <li><a href="#our-team" onclick = $(".toggle-menu").click();>item2</a></li>
                <li><a href="#services" onclick = $(".toggle-menu").click();>item3</a></li>
                <li><a href="#elia" onclick = $(".toggle-menu").click();>item4</a></li>
                <li><a href="#portfolio" onclick = $(".toggle-menu").click();>item5</a></li>
                <li><a href="#contact" onclick = $(".toggle-menu").click();>item6</a></li>
            </ul>
        </div> <!-- /.menu-responsive -->
    </div> <!-- /.container -->
</div> <!-- /.main-header
— Браво Стефане
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.