Свернутое меню Bootstrap 3 не закрывается при нажатии

Просто, чтобы поделиться этим с решениями на 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".

[UPDATE 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>  

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

Ссылка: 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');
});

Это поможет справиться с раскрывающимся списком в панели навигации

У меня возникли проблемы с Bootstrap 4, alpha-6 и Joakim Johansson, которые я поставил в правильном направлении. Javascript не требуется. Помещение данных-target = ". Navbar-collapse" и data-toggle = "collapse" в тег 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), и все работает хорошо.

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

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

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

Я сделал

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

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

В Bootstrap 4 просто выполните следующее:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});

Если вы хотите, чтобы ваша навигация переключилась при использовании на экране мобильного телефона, просто добавив data-toggle="collapse" и data-target="#navbar" к вашим элементам, они будут работать на экране мобильного телефона, но при нажатии на рабочем столе вы получите странное мерцание экран. Решения 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);
      }
    }
  }
}

Если вы хотите вручную переопределить это поведение, вызвав .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>

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

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

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

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

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

Пример:

JS

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

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

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

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

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

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

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

• Скрытое/переключенное навигационное меню скрывается, когда нажимается навигационная "секция" (например, href= "# foobar" ) (проблема с этим потоком).
• Активный "раздел" был успешно выделен (т.е. успешно создан js class= "активный" )
• Отказоустойчивая вертикальная полоса прокрутки, найденная на свернутом nav (только на небольших экранах), была устранена.

ПРИМЕЧАНИЕ. В приведенном ниже js-коде (со второй ссылки jsfiddle в моем сообщении):

topMenu = $( "# myScrollspy" ),

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

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

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

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

Мое меню не стандартное, но мне удалось автоматически свернуть мой, используя функцию "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