Bootstrap 3 свернутое меню не закрывается по щелчку

У меня более или менее стандартная навигация от bootstrap 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>

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

23 ответов


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


чтобы поделиться этим из решений на 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');
    }
});

изменить это:

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

для этого:

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

Это простое изменение сработало для меня.

Ref:https://github.com/twbs/bootstrap/issues/9013


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

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


$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

Это поможет в обработке выпадающего списка в nav bar


У меня есть / были аналогичные проблемы с Bootstrap 4, alpha-6 и Йоаким Юханссонответ выше начал меня в правильном направлении. Не требуется javascript. Putting data-target=".navbar-collapse "и 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>

у меня была та же проблема, я использовал jQuery-1.7.1 и bootstrap 3.2.0. Я изменил версию jQuery на последнюю (jquery-1.11.2) версию и все работает хорошо.


Я

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});

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

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

(извините за такой ответ, хотел добавить комментарий к этому ответу, но, кажется, у меня недостаточно кредита, чтобы сделать замечания )


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

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).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>

если вы хотите, чтобы ваша навигация переключалась только при использовании на мобильном экране, просто добавьте data-toggle="collapse" и data-target="#navbar" для ваших элементов a будет работать на мобильном экране, но даст вам странное мерцание при нажатии на экране рабочего стола. Решения jQuery не работают хорошо, если вы находитесь в среде Aurelia или Angular.

лучшим решением для меня было создать пользовательский атрибут, который прослушивает соответствующий медиа-запрос и добавляет в


 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});

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

  1. свернутое / переключенное меню nav скрывается, когда нажата nav "раздел" (например, href="#foobar") (проблема, связанная с этим потоком).
  2. активный "раздел" был успешно выделен (т. е. JS успешно создал class= "active")
  3. раздражающая вертикальная полоса прокрутки, найденная на свернутом nav (только на небольшие экраны) был устранен.

примечание: в коде js, показанном ниже (из второй ссылки jsfiddle в моем сообщении):

topMenu = $("myScrollspy#"),

...значение "myScrollspy"должно соответствовать id= "" в вашем HTML, как так...

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

конечно, вы можете изменить это значение на любое значение вы хотите.


все, что вам нужно, это data-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>

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


Это код, который работал для меня:

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})

У меня была такая же проблема, убедитесь, что Bootstrap.js включен в вашу html-страницу. В моем случае меню открылось, но не закрылось. Как только я включил файл bootstrap js, все просто сработало.


просто попробуйте сделать функцию в javascript для выпадающего класса collapse.

пример:

JS:

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

подключите эту функцию к onClick просто работает для меня.


У меня была аналогичная проблема, но моя не останется открытой, она быстро откроется/закроется, я обнаружил, что у меня есть jquery-1.11.1.минута.Яш загрузки до загрузки.минута.js. Поэтому я изменил порядок этих 2 файлов и исправил свое меню. Теперь работает безупречно. Надеюсь, это поможет


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

просто держите последние версии, вам нужна только одна ссылка. Решить проблему.


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


мое меню не является стандартным navbar, но мне удалось автоматически свернуть мое, используя функцию "onclick " и".щелчок.")(

<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