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

Question

[CheGevara]

Одностраничный сайт на 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;
}

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

Comments

[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-->

Answer 1

[Александр Лаликин]

По нажатию на "сендвич" у блока с меню начинается анимация, а после нее добавляется класс in. Чтобы по нажатию спрятать меню, достаточно забрать класс, дальнейшая работа с меню будет корректной.
$('#navbar-collapse').removeClass('in');
Касательно padding-top: 50px;
Либо создаем якорь выше, чтобы он прятался под меню, а нужное нам было на 50px ниже. Либо через js

<a href="#anchor" class="toAnchor">ссылка для перехода</a>
.........
<a id="anchor">якорь</a>

$('.toAnchor').on('click', function () {
  $a = $($(this).attr('href'));
  $('html,body').animate({ scrollTop: $a.offset().top - 50}, 500);
  return false;
});

Comments

[DiTaNaToR]

А мне подскажите пожалуйста тоже. В мобильной версии не убирается меню, при выборе какого-либо пункта.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

        <div class="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="#bs-example-navbar-collapse-1">
                    <span class="sr-only">MENU</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

Answer 2

[Сергей Козлов]

Александр! Большое человеческое спасибо! Удалось решить обе проблемы. Правда, я как ламер, сначала подумал, что нужно просто вставить код и всё будет работать ) Оказалось, что нужно всё-таки понимать, что делаешь ) В первом случае удаление класса нужно делать именно по нажатию на пункт меню, а фрагмент кода не содержит обработки нажатия ) А во втором случае - опечатка: вместо точки '.' в коде стоит шарп '#'. Дополнив и исправив, получил работающий код, решающий сразу обе проблемы. Ещё раз большое спасибо!

<script> 
        $('.toAnchor').on('click', function () {
           $('.navbar-collapse').removeClass('in');
           $a = $($(this).attr('href'));
           $('html,body').animate({ scrollTop: $a.offset().top - 50}, 500);
         return false;
         });
   </script>

Comments

[alloalex]

проверено. И вам спасибо!

[Евгений Саймон]

Тоже проверил. Получилось

Answer 3

[ralduga]

Мне помогло это:

$(function(){ 
     var navMain = $(".navbar-collapse"); 
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

Comments

[Evgeniy Kuchin]

отлично работает. спасибо.

примеры выше не точные.

[Marat Dartz]

Подскажите, пожалуйста, куда именно необходимо вставить данный скрипт?

[CheGevara]

Marat Dartz, я в футер вставляю

Answer 4

[stanislav_slav]

этот код сделает скрытие панели медленным (анимированным):

$('.navbar-collapse').on('click', function () {
    $('.navbar-collapse').collapse('hide');
    $a = $($(this).attr('href'));
    $('html,body').animate({ scrollTop: $a.offset().top - 50}, 500);
    return false;
});

Comments

[Андрей]

Уважаемый Станислав,помогите пожалуйста начинающему.Увидел Ваш ответ ,но он в моем случае не помог.Заранее благодарю,Андрей.
У меня меню выглядит так:

<div class="main-nav">
      <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>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <h1><img class="img-responsive" src="logo.jpg" alt="logo"></h1>
          </a>                    
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">                 
            <li class="scroll active"><a href="#home-slider">Пункт1</a></li>
            <li class="scroll"><a href="#services">Пункт2</a></li> 
            <li class="scroll"><a href="#portfolio">Пункт3</a></li>
            <li class="scroll"><a href="#about-us">Пункт4</a></li>
            <li class="scroll"><a href="#team">Пункт5</a></li>
            <li class="scroll"><a href="#contact">Пункт6</a></li>       
          </ul>
        </div>
      </div>
    </div>

[stanislav_slav]

Андрей, а у вас подключены js библиотеки?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script> <!-- этот файл локально должен быть -->

[Андрей]

stanislav_slav, спасибо за помощь,bootstrap , был подключен.А подключив ajax =-сайт перестал загружаться,видно конфликтует с другими скриптами.Стыдно признаться-я в них не волоку((( .Посмотрите пожалуйста,заранее благодарю

<script type="text/javascript" src="/assets/house/js/jquery.js"></script>
  <script type="text/javascript" src="/assets/house/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true(30 minutes)"></script>
  <script type="text/javascript" src="/assets/house/js/jquery.inview.min.js"></script>
  <script type="text/javascript" src="/assets/house/js/wow.min.js"></script>
  <script type="text/javascript" src="/assets/house/js/mousescroll.js"></script>
  <script type="text/javascript" src="/assets/house/js/smoothscroll.js"></script>
  <script type="text/javascript" src="/assets/house/js/jquery.countTo.js"></script>
  <script type="text/javascript" src="/assets/house/js/lightbox.min.js"></script>
  <script type="text/javascript" src="/assets/house/js/main.js"></script>
  
  <script src="/assets/house/js/jjj/owl.carousel.min.js"></script>  
  <script src="/assets/house/js/jjj/jquery.parallax-1.1.3.js"></script>
  <script src="/assets/house/js/jjj/jquery.nicescroll.min.js"></script>
  <script src="/assets/house/js/jjj/jquery.appear.js"></script>
  <script src="/assets/house/js/jjj/jquery.nav.js"></script>
  <script src="/assets/house/js/jjj/jquery.sticky.js"></script>  
  <script src="/assets/house/js/jjj/jquery.fitvids.js"></script>
  <script src="/assets/house/js/jjj/custom.js"></script>   
  
  <script>
     $(".menu_btn").click(function() {
  $(".header").toggleClass("open_menu");
});

$(document).mouseup(function(e) {
  var $target = $(e.target);
  if ($target.closest(".header").length == 0 && $target.closest(".menu_btn").length == 0) {
    $(".header").removeClass("open_menu");
  }
});
 </script>

[Андрей]

stanislav_slav, ajax script добавил,но меню не закрывается

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
      $('.navbar-collapse').on('click', function () {
    $('.navbar-collapse').collapse('hide');
    $a = $($(this).attr('href'));
    $('html,body').animate({ scrollTop: $a.offset().top - 50}, 500);
    return false;
});
  </script>

[stanislav_slav]

Андрей попробуйте вот так:

$(document).ready(function(){
    $(".navbar-collapse").on("click","a", function (event) {
        event.preventDefault();
        var id  = $(this).attr('href'),
        top = $(id).offset().top;
        $('body,html').animate({scrollTop: top-20}, 500);
        $('.navbar-collapse').collapse('hide');
    });
});

[Андрей]

stanislav_slav, доброе утро. Не закрывается. Вера один парень предложил

$('.navbar-nav a').click(function(){
$('.navbar-collapse').hide()
})

Меню закрылось после клика,но повторно уже не открывается.Заранее благодарю.

Answer 5

[Site Maker]

Для 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;
});

Comments

[luchiena]

Спасибо Вам огромное!! Даже человек не разбирающийся в коде (я) смог сделать это