Как сделать что бы меню в bootstrap в мобильной версии закрывалось при клике на пункте из меню?

Question

CheGevara @CheGevara

Как сделать что бы меню в bootstrap в мобильной версии закрывалось при клике на пункте из меню?

Одностраничный сайт на Bootstrap. Есть стандартное меню. Фиксированное и не прокручивающееся. Ссылки видут на якори на этой же странице.

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container container-fluid">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
		<span class="sr-only">Меню</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		</button>
	<a class="navbar-brand" href="#">ЛОГО</a>		
	
	</div>
	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse" id="navbar-collapse">
	<ul class="nav navbar-nav">
	</ul>
	<ul class="nav navbar-nav navbar-right">
	<li><a href="#punkt1">punkt1</a></li>
	<li><a href="#punkt2">punkt2</a></li>
	<li><a href="#punkt3">punkt3</a></li>
	</ul>
	</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
</div>

В мобильной версии имеет следующие поведение:
Нажимаем на «сендвич» меню.
Открывается меню.
Нажимаем на любую ссылку.
Страница прокручивается до якоря.
НО меню не закрывается =((((

P.S.: так же скажу спасибо, если подскажете следующие:
в css задано

body {
padding-top: 50px;
}

Что бы вверх сайта не оказался под меню. Но когда мы переходим по якорю, то якорь получается под меню. Как это поправить?

Вопрос задан более трёх лет назад
23857 просмотров

1 комментарий

Подписаться 4 Оценить 1 комментарий

aleksandrkomyagin @aleksandrkomyagin

Добрый день! Уважаемые эксперты помогите пожалуйста! Как сделать чтобы после выбора вкладки из меню либо после нажатия в любую область страницы меню скрывалось?

<nav class="navbar navbar-default">
			  	<div class="container">
			  		<div class="row">
			  			<div class="col-xs-3">
			  				 <!-- START LOGO -->
                            <div class="logo">
                                <a href="index.html">Главная</a>
                            </div>
                        	<!-- END LOGO -->
			  			</div>
			  			<div class="col-xs-9">
							<div class="navbar-header">
						  		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-top">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
						  		</button>


								  <!-- Top navigation buttons, visible only in extra small mode -->
								  <a class="visible-xs bb-nav-prev navbar-brand navbar-brand-pagination" href="#"><i class="fa fa-angle-left"></i></a>
								  <a class="visible-xs bb-nav-next navbar-brand navbar-brand-pagination" href="#"><i class="fa fa-angle-right"></i></a>
								  <!-- /Top navigation buttons -->
							
							</div>
							<div  class="collapse navbar-collapse" id="nav-top">
						  		<ul class="nav navbar-nav navbar-right" id="menu">								
									<li><a href="#" data-page="1">Резюме</a></li>
									<li><a href="#" data-page="2">Навыки</a></li>
									<li><a href="#" data-page="3">Образование</a></li>
									<li><a href="#" data-page="4">Прайс</a></li> 
									<li><a href="#" data-page="5">Портфолио</a></li>
									<li><a href="#" data-page="6">Задать вопрос</a></li>
						  		</ul>
							</div><!-- /navbar-collapse -->
						</div>
					</div><!--/row-->
			  	</div><!-- /container -->
			</nav><!--/nav-->

Написано более трёх лет назад

Добрый день! Уважаемые эксперты помогите пожалуйста! Как сделать чтобы после выбора вкладки из меню либо после нажатия в любую область страницы меню скрывалось?

<nav class="navbar navbar-default"> <div class="container"> <div class="row"> <div class="col-xs-3">  <div class="logo"> <a href="index.html">Главная</a> </div>  </div> <div class="col-xs-9"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-top"> <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="visible-xs bb-nav-prev navbar-brand navbar-brand-pagination" href="#"><i class="fa fa-angle-left"></i></a> <a class="visible-xs bb-nav-next navbar-brand navbar-brand-pagination" href="#"><i class="fa fa-angle-right"></i></a>  </div> <div class="collapse navbar-collapse" id="nav-top"> <ul class="nav navbar-nav navbar-right" id="menu"> <li><a href="#" data-page="1">Резюме</a></li> <li><a href="#" data-page="2">Навыки</a></li> <li><a href="#" data-page="3">Образование</a></li> <li><a href="#" data-page="4">Прайс</a></li> <li><a href="#" data-page="5">Портфолио</a></li> <li><a href="#" data-page="6">Задать вопрос</a></li> </ul> </div> </div> </div> </div> </nav>

Answer 1 · 2019-10-30 13:40:23

Для Bootstrap 4.3.1 - Рабочий вариант.
При клике на ссылку закрывает меню и убирает тёмный фон.

$('.nav-link').on('click', function () {
	$('.navbar').removeClass('open');
	$('.bg-overlay').removeClass('open1');
	$a = $($(this).attr('href'));
	$('html,body').animate({ scrollTop: $a.offset().top - 50}, 500);
	return false;
});

Как сделать что бы меню в bootstrap в мобильной версии закрывалось при клике на пункте из меню?

Войдите на сайт