Свернутое меню 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>

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

— паранойя
источник

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, включая:

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

ПРИМЕЧАНИЕ. В коде 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

— Браво Стефан
источник