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>
Это простое изменение сработало для меня.
у меня была та же проблема, но вызванная включением два раза 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
) версию и все работает хорошо.
хотя решение, опубликованное ранее, чтобы изменить сам пункт меню, как показано ниже, работает, когда меню находится на небольшом устройстве, оно имеет побочный эффект, когда меню при полной ширине и расширении это может привести к горизонтальной полосе прокрутки, скользящей по пунктам меню. Решения 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 для меня, включая:
- свернутое / переключенное меню nav скрывается, когда нажата nav "раздел" (например, href="#foobar") (проблема, связанная с этим потоком).
- активный "раздел" был успешно выделен (т. е. JS успешно создал class= "active")
- раздражающая вертикальная полоса прокрутки, найденная на свернутом 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