Свернутое меню 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
Возможный дубликат
рулона

Ответы:

48

По умолчанию в Bootstrap меню остается открытым, когда вы щелкаете по пункту меню. Вы можете вручную изменить это поведение, вызвав .collapse('hide');элемент jQuery, который вы хотите свернуть.

VCNinc
источник
8
Это неправильно, бутстрап автоматически переключает класс «свертывания». Вам не нужен дополнительный код jquery. Если у вас такое поведение, это означает, что что-то не так в вашем html-коде (со своей стороны я дважды включал jquery и bootstrap, см. Ответ @raisercostin).
RomOne
@RomOne Это правильный ответ. Bootstrap вовсе не закрывает меню после ссылки щелкнул по умолчанию. Другой ответ применим только в том случае, если люди неправильно дважды включают jQuery, что не является правильным ответом на этот вопрос.
Зим
136

Чтобы поделиться этим из решений на GitHub, это был популярный ответ:

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

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

Это связано с документом, поэтому вам не нужно делать это в ready () (вы можете динамически добавлять ссылки в свое меню, и оно все равно будет работать), и он вызывается только в том случае, если меню уже развернуто. Некоторые люди сообщали о странном мигании, когда меню открывается, а затем немедленно закрывается с помощью другого кода, который не проверял, что меню имеет класс «in».

[ОБНОВЛЕНИЕ 2014-11-04] очевидно, что при использовании подменю вышеуказанное может вызвать проблемы, поэтому приведенное выше было изменено на:

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
Кевин Нельсон
источник
1
Работает безупречно. Спасибо, что поделился!
Родриго Чионг
Можете ли вы объяснить '$ (this) .collapse (' hide ');' Пожалуйста. я не понимаю, откуда
взялось
@ImranNazir, извините, это путь после вопроса, но collapseэто метод, определенный начальной загрузкой и прикрепленный к объекту jQuery ... предположительно, они повторно используют это для нескольких целей (аккордеон, навигационная панель и т.д.): getbootstrap.com/javascript / # collapse-usage
Кевин Нельсон
Обновленный код работал у меня, ответы выше этого не сделали. Спасибо!
RandomUs1r
«[ОБНОВЛЕНИЕ 2014-11-04]» сработало. Что касается другого решения, в котором рекомендуется удалить повторяющуюся ссылку на bootstrap.js и jquery, которая не является необходимым решением. Я нашел это решение, чтобы решить проблему с меньшими затратами времени на отладку и с более явным поведением. Спасибо!. Надеюсь, это поможет вам, как и мне.
Нур Лабабиди
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/issues/9013

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

У меня была та же проблема , но в результате в том числе дважды bootstrap.js и jquery.jsфайлы.

Одним щелчком мыши событие было обработано дважды обоими экземплярами jquery. Один закрыл, а другой открыл тумблер.

raisercostin
источник
3
У меня была точно такая же проблема, но я не понимал, что они были включены дважды. Спасибо, что разместили это!
Brian ONeil
2
И наш стажер тоже. Спасибо, что разместили это.
Teisman
2
Мужчина! Я сделал то же самое - думаю, я снова стал стажером!
Dicer
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 не требуется. Помещение data-target = ". Navbar-collapse" и data-toggle = "collapse" в тег div внутри навигационной панели, но окружающее ссылки / кнопки, сработало для меня.

<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 = "collapse" data-target = ". Navbar-collapse">
Дессус
Это уже было опубликовано 3 года назад. Кроме того, это нарушает анимацию в немобильном представлении.
бувигер
6

Я знаю, что этот вопрос касается Bootstrap 3, но если вы ищете решение для Bootstrap 4 , просто сделайте следующее:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
Сайед
источник
Я использую бета-версию BS4, и ваш код работает отлично. Я попробовал все другие предлагаемые решения здесь, но безуспешно. BS4, по-видимому, изменился настолько, что другие решения просто не применимы.
Bicycle Dave
Для актуальности и для одновременного отображения обновленной информации - это должен быть лучший ответ.
Ricky
@Ricky OP указал Bootstrap 3, а не 4.
Малавос
Для меню с раскрывающимися списками я использовал это:$(".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) версию, и все работает хорошо.

Densol
источник
5

я сделал 

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});
weaveoftheride
источник
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 :-)
Chit
@bfontaine Во-первых, вы должны добавить идентификатор в свой div меню, и когда вы нажмете на свое меню, после всего меню будет скрыто. Например: - При нажатии на меню «О нас» вкладка меню отдыха будет скрыта.
Чит
1
спасибо, но, пожалуйста, напишите это в своем ответе;)
bfontaine
1

Если вы хотите вручную переопределить это поведение, вызвав .collapse ('hide') в директиве angular, вот код:

файл 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"к вашим элементам a будет работать на мобильном экране, но даст вам странное мерцание при нажатии на экране рабочего стола. Решения jQuery не работают, если вы находитесь в среде Aurelia или Angular.

Лучшим решением для меня было создание настраиваемого атрибута, который прослушивает соответствующий медиа-запрос и 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);
      }
    }
  }
}
Развернуть фрагмент

halllo
источник
0

Я обнаружил, что после долгой борьбы, проб и ошибок лучшее решение для меня на jsfiddle. Ссылка на вдохновение на jsfiddle.net . Я использую загрузочную панель navbar-fixed-top с переключением коллапса и гамбургера. Вот моя версия на jsfiddle: jsfiddle Scrollspy navbar . Я получал только базовые функции, используя инструкции на getbootsrap.com. Для меня проблема была в основном в расплывчатых направлениях и js, рекомендованных сайтом getbootstrap. Самое приятное то, что добавление этого дополнительного бита js (который включает в себя некоторые из того, что упоминается в приведенных выше потоках) решило для меня несколько проблем Scrollspy, включая:

  1. Свернутое / переключенное меню навигации скрывается при нажатии на "раздел" навигации (например, 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

Все, что вам нужно, это data-target = ". Navbar-collapse" в кнопке, больше ничего.

<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>
Marodo
источник
+1: он также работает, добавляя data-toggle = "collapse" data-target = ". Navbar-collapse" в <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-страницу. В моем случае меню открылось, но не закрылось. Как только я включил файл bootstrap js, все заработало.

Elitmiar
источник
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. Поэтому я изменил порядок этих двух файлов и исправил свое меню. Теперь работает безупречно. Надеюсь, поможет

Vasko
источник
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();
    }
  }

Надеюсь, поможет :)

stathoula
источник
-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
Браво Стефан
источник