Скрыть Twitter Bootstrap nav свернуть по щелчку
это не раскрывающийся список подменю, категория-класс li, как на картинке:
выбрав категорию из отзывчивого меню (шаблон просто одна страница), я хочу скрыть nav collapse автоматически при нажатии. Также stroll использовать в качестве навигации, так как шаблон имеет только один страница. Я ищу решение, которое не влияет на нее, вот HTML код меню:
<!-- NAVBAR
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Carousel Demo</a>
<div class="nav-collapse">
<ul class="nav" >
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
<!-- dropdown -->
</ul>
<!-- /.nav -->
</div>
<!--/.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
29 ответов
попробуйте это:
$('.nav a').on('click', function(){
$('.btn-navbar').click(); //bootstrap 2.x
$('.navbar-toggle').click(); //bootstrap 3.x by Richard
$('.navbar-toggler').click(); //bootstrap 4.x
});
Я просто реплицирую 2 атрибута btn-navbar
(data-toggle="collapse" data-target=".nav-collapse.in"
) по каждой ссылке так:
<div class="nav-collapse">
<ul class="nav" >
<li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a></li>
<li><a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a></li>
<li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a></li>
<li><a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a></li>
<li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a></li>
</ul>
</div>
на Bootstrap 4 Navbar, in
изменился на show
так что синтаксис такой:
data-toggle="collapse" data-target=".navbar-collapse.show"
$(function() {
$('.nav a').on('click', function(){
if($('.navbar-toggle').css('display') !='none'){
$('.navbar-toggle').trigger( "click" );
}
});
});
лучше использовать развал по умолчанию.методы js:
$('.nav a').click(function(){
$('.nav-collapse').collapse('hide');
});
еще более элегантный без вылизывания дублированного кода, это просто применить data-toggle="collapse"
и data-target=".nav-collapse"
атрибуты самого навигатора:
<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">
<ul class="nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
супер чистый, не требуется JavaScript. Работает отлично, до тех пор, пока ваш ваш nav a
элементы имеют достаточно обивки для жирных пальцев, и вы не предотвращаете событие щелчка пузырясь через e.stopPropagation()
когда пользователи нажимают на nav a
предметы.
обновить
<li>
<a href="#about">About</a>
</li>
to
<li>
<a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>
Это простое изменение сработало для меня.
навигация должна быть закрыта в любое время, когда пользователь нажимает в любом месте тела - не только элементы навигации. Скажем, меню открыто, но пользователь щелкает в теле страницы. Пользователь ожидает увидеть меню закрыть.
вы также должны убедиться, что кнопка переключения видна, иначе прыжок будет виден в меню.
$(document).ready(function() {
$("body").click(function(event) {
// only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called
if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
$('.navbar-collapse').collapse('toggle');
}
});
});
протестировано на Bootstrap 3.3.6-работа!
$('.nav a').click(function () {
$('.navbar-collapse').collapse('hide');
});
попробуйте это > Bootstrap 3
блестящий именно то, что я искал, однако у меня были некоторые столкновения с javascript и модальным загрузчиком, это исправило его.
$(function() {
$('.navbar-nav').on('click', function(){
if($('.navbar-header .navbar-toggle').css('display') !='none'){
$(".navbar-header .navbar-toggle").trigger( "click" );
}
});
});
надеюсь, что это помогает.
Это хорошо сработало для меня. Это то же самое, что и принятый ответ, но устраняет проблему, связанную с представлением рабочего стола/планшета
$('.navbar-nav a').on('click', function () {
if (window.innerWidth <= 768) {
$(".navbar-toggle").click();
}
});
Я думаю, что лучше использовать Bootstrap 3 по умолчанию коллапс.методы js С помощью .navbar-collapse
как разборный элемент, который вы хотите скрыть, как показано ниже.
другие решения могут вызвать другие нежелательные проблемы с отображением или функционированием элементов на вашей веб-странице. Таким образом, хотя некоторые решения могут решить вашу первоначальную проблему, они могут ввести другие, поэтому убедитесь, что вы провели тщательное тестирование вашего сайта после любого исправления.
посмотреть этот код в действии:
- нажмите" Запустить этот фрагмент кода " ниже.
- Нажмите кнопку "полная страница".
- масштаб окна до выпадающий активирует.
- выберите пункт меню и вуаля!
Ура!
$('.nav a').click(function() {
$('.navbar-collapse').collapse('hide');
});
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Franciscus Agnew">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap Navbar Collapse Function</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-expanded="navbar"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
<a class="navbar-brand" href="#">Brand Logo</a>
</div><!-- navbar-header -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#staff">Staff</a></li>
<li><a href="#contact">Contact</a></li>
</ul><!-- navbar-right -->
</div><!-- navbar-collapse -->
</div><!-- container -->
</nav><!-- navbar-fixed-top -->
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom Navbar Collapse Script Solution -->
<script>
$('.nav a').click(function() {
$('.navbar-collapse').collapse('hide');
});
</script>
</body>
</html>
на каждую выпадающую ссылку поставить data-toggle= "свернуть" и data-target=".nav-collapse", где nav-collapse-это имя, которое вы даете ему в раскрывающемся списке.
<ul class="nav" >
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
<li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
<li><a href="#services" data-toggle="collapse" data-target="nav-collapse">Services</a></li>
<li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
<!-- dropdown -->
</ul>
это отлично работает на экране, который имеет раскрывающийся список, как мобильные экраны, но на рабочем столе и планшете он создает flickr. Это потому, что ... применяется класс collapsing. Чтобы удалить flickr, я создал медиа-запрос и вставил переполнение, скрытое в сворачивающийся класс.
@media (min-width: 768px) {
.collapsing {
overflow: inherit;
}
}
добавление data-toggle="свернуть" data-target=".navbar-коллапс.in " to the tag <a>
работал для меня.
<div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a
href="#" data-toggle="collapse" data-target=".navbar-collapse.in" class="nav-link" >Home
</a></li>
</ul>
</div>
вот как я это сделал. Если есть более гладкий способ, пожалуйста, пожалуйста, скажите мне.
внутри <a>
теги, где ссылки на меню я добавил этот код:
onclick="$('.navbar-toggle').click()"
он сохраняет анимацию слайдов. Поэтому в полном использовании это будет выглядеть так:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="topNavController as topNav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="home.html">My Cool Site</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active" onclick="$('.navbar-toggle').click()"><a href="home.html" onclick="$('.navbar-toggle').click()"><i class="fa fa-home"></i> Home</a></li>
<li><a href="aboutus.html" onclick="$('.navbar-toggle').click()">About Us</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
$(function() {
$('.nav a').on('click touchstart', function(){
if($('.navbar-toggle').css('display') !='none'){
$(".navbar-toggle").trigger( "click" );
}
});
});
/ / примечание Я добавил "touchstart" для мобильного касания. touchstart / end не имеет задержки
Это лучшее решение, которое я использовал.
$(document).ready(function () {
$('.nav a').on('click', function () {
if ($(".btn-navbar").is(":visible") ){ $(".btn-navbar").trigger("click"); } //bootstrap 2.x
if ($(".navbar-toggle").is(":visible")) { $(".navbar-toggle").trigger("click"); } //bootstrap 3.x
});
});
для тех, кто заметил, что панели навигации рабочего стола мерцают при использовании этого решения:
$('.nav a').on('click', function(){
$(".navbar-collapse").collapse('hide');
});
простым решением этой проблемы является ссылка на свернутый navbar только путем проверки наличия "in":
$('.navbar-collapse .nav a').on('click', function(){
if($('.navbar-collapse').hasClass('in'))
{
$(".navbar-collapse").collapse('hide');
}
});
это сворачивает панель навигации по щелчку, когда панель навигации находится в мобильном режиме, но оставит в покое настольную версию. Это позволяет избежать мерцания, которое многие люди видели в настольных версиях.
кроме того, если у вас есть navbar с выпадающее меню вы не сможете увидеть их, поскольку панель навигации будет скрыта, как только вы нажмете на них, поэтому, если у вас есть выпадающие меню (как у меня!), используйте следующее:
$('.nav a').on('click', function(e){
if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
{
$(".navbar-collapse").collapse('hide');
}
});
Это ищет наличие выпадающего класса над ссылкой, нажатой в DOM, если она существует, то ссылка намеревалась запустить выпадающее меню, и, следовательно, меню не скрыто. Когда вы нажмете на ссылку в раскрывающемся меню, Панель навигации скроется правильно.
$("body,.nav a").click(function (event) {
// only do this if navigation is visible, otherwise you see jump in
//navigation while collapse() iS called
if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) {
$('.navbar-collapse').collapse('toggle');
}
});
100% работают:-
добавить в HTML
<div id="myMenu" class="nav-collapse">
в JavaScript
$(function(){
var navMain = $("#myMenu");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
это скрывает nav collapse вместо того, чтобы анимировать его, но ту же концепцию, что и выше ответ
JS:
$('.nav a').on('click', function () {
$("#funk").toggleClass('in collapse');
});
HTML-код:
<div class="navbar-collapse" id="funk">
Я предпочитаю это на одностраничных сайтах, потому что я использую localScroll.js, который уже оживляет.
мобильный вид: как скрыть переключение навигации в bootstrap + dropdown + jquery + scrollto с элементами навигации, которые указывают на якоря / идентификаторы на той же странице, одной странице шаблона
проблема, которую я экспериментировал с любым из вышеупомянутых решений, заключалась в том, что они сворачивают только элементы подменю, в то время как меню навигации не сворачивается.
так я думал.. и что мы можем наблюдать? Ну, каждый раз, когда мы / пользователи нажимаем ссылку scrollto, мы хотите, чтобы страница прокрутилась до этой позиции и одновременно свернуть меню, чтобы восстановить представление страницы.
хорошо... почему бы не назначить это задание функциям scrollto? Легко :-)
Итак, в двух кодах
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
и
// scroll function
function scrollToID(id, speed){
var offSet = 67;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
Я только что добавил одну и ту же команду в обеих функциях
if($('.navbar-toggle').css('display') !='none'){
$(".navbar-toggle").trigger( "click" );
}
(слава одному из вышеперечисленных авторов)
такой (то же самое должно быть добавлено к свитки)
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
if($('.navbar-toggle').css('display') !='none'){
$(".navbar-toggle").trigger( "click" );
}
});
если вы хотите увидеть его в действии, просто проверьте его recupero dati da NAS
пользователи Bootstrap3 попробуйте приведенный ниже код. У меня получилось.
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav a').on('click', function(){
$(".navbar-toggle").click();
});
}
else {
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
Bootstrap устанавливает .in
class на элементе Collapse для запуска анимации – чтобы открыть его. Если вы просто удалите .in
класс, анимация не запускается, но скроет элемент-не совсем то, что вы хотите.
скорее всего, быстрее запустить if
оператор для проверки, если класс начальной загрузки по умолчанию .in
был установлен на элементе.
так этот код просто говорит:
если мой элемент имеет класс
.in
применено, закройте его, запустив анимацию Bootstrap по умолчанию. В противном случае запустите действие Bootstrap по умолчанию/анимацию его открытия
$('#navbar a').on('click touchstart', function() {
// if .in class is set on element, the element is visible – you want to hide it
if ($('#navbar').hasClass('in')) {
// collapse toggle will remove the .in class and animate the element closed
$('#navbar').collapse('toggle');
}
})
добавьте идентификатор к каждому
<li> add data-target="myMenu" data-toggle="collapse"
<div id="myMenu" class="nav-collapse">
<ul class="nav">
<li class="active" data-target="myMenu" data-toggle="collapse"><a href="#home">Home</a></li>
<li data-target="myMenu" data-toggle="collapse"><a href="#about">About</a></li>
<li data-target="myMenu" data-toggle="collapse"><a href="#portfolio">Portfolio</a></li>
<li data-target="myMenu" data-toggle="collapse"><a href="#services">Services</a></li>
<li data-target="myMenu" data-toggle="collapse"><a href="#contact">Contact</a></li>
</ul>
</div>
еще одно быстрое решение для Bootstrap 3.* может быть:
$( document ).ready(function() {
//
// Hide collapsed menu on click
//
$('.nav a').each(function (idx, obj) {
var selected = $(obj);
selected.on('click', function() {
if (selected.closest('.collapse.in').length > 0) {
$('.navbar-toggle').click(); //bootstrap 3.x by Richard
}
});
});
});
я опубликовал решение, которое работает с Aurelia здесь:https://stackoverflow.com/a/41465905/6466378
проблема в том, что вы не можете просто добавить data-toggle="collapse"
и data-target="#navbar"
в вашей элементов. И jQuery не работает в Аурелии или угловой среде.
лучшим решением для меня было создать пользовательский атрибут, который прослушивает соответствующий медиа-запрос и добавляет в
Я на Bootstrap 4, используя fullPage.js с фиксированной верхней навигацией и попробовал все, что указано здесь, со смешанными результатами.
-
пробовал лучший, чистый способ:
data-toggle="collapse" data-target=".navbar-collapse.show"
меню рухнет, но ссылки href никуда не приведут.
-
попробовал логические другие способы:
$('myClickableElements').on('click touchstart', function(){ $(".navbar-collapse.show").collapse('hide'); // or $(".navbar-collapse.show").collapse('toggle'); // or $('.navbar-toggler').click() });
было бы какое-то странное поведение из-за события touchstart : нажатые кнопки в конечном итоге не будут теми, которые я фактически щелкнул, следовательно, разрывая ссылки. Плюс это добавило бы .показать класс некоторым другим несвязанным выпадающим спискам в моем навигаторе, вызывая некоторые более странные вещи.
- попытался изменить div на li
- попытался e.preventDefault () и e.stopPropagation ()
- пробовал и пробовал больше
ничего не будет работать.
Итак, вместо этого у меня была (до сих пор) чудесная идея сделать это :
$(window).on('hashchange',function(){
$(".navbar-collapse.show").collapse('hide');
});
у меня уже есть кое-что функция hashchange, si мне просто нужно было добавить эту строку.
на самом деле он делает именно то, что я хочу : сворачивание меню при изменении хэша (т. е. щелчок, ведущий куда-то еще). Что хорошо, потому что теперь у меня могут быть ссылки в моем меню, которые не свернут его.
кто знает, может это поможет кому-то в моей ситуации!
и спасибо всем, кто участвовал в этой теме, много информации, чтобы узнать здесь.
Я проверил в меню открывается, проверяя класс "in", а затем запустите код.
$('.navbar-collapse a').on('click', function(){
if ( $( '.navbar-collapse' ).hasClass('in') ) {
$('.navbar-toggle').click();
}
});
работает отлично.