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

У меня от бутстрапа 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>

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

По умолчанию в 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>  

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

Ссылка: 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, и ответ Йоакима Йоханссона выше начал меня в правильном направлении. 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>

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

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

У меня была такая же проблема, я использовал 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>  

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

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

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

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

Если вы хотите, чтобы ваша навигация переключалась только при использовании на мобильном экране, просто добавление 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);
      }
    }
  }
}

Я обнаружил, что после долгой борьбы, проб и ошибок лучшее решение для меня на 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">

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

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

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

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

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

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

Пример:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

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

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

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

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

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

У меня была такая же проблема только на мобильном телефоне, но для приложения 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();
    }
  }

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

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