Скрыть Twitter Bootstrap Nav свернуть на клике

Я просто реплицирую 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" );
        }
    });
});

Лучше использовать методы collapse.js по умолчанию:

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

Еще более элегантным без лизать дублированный код является просто применить атрибуты data-toggle="collapse" и data-target=".nav-collapse" к самому nav:

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

Это простое изменение сработало для меня.

Ссылка: https://github.com/twbs/bootstrap/issues/9013

Навигацию следует закрывать в любое время, когда пользователь щелкает в любом месте тела, а не только элементы навигации. Меню Say открыто, но пользователь нажимает на тело страницы. Пользователь ожидает закрытия меню.

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

$(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 и bootstrap modal, это исправило это.

    $(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();
        }
    });

Я думаю, что лучше использовать default Bootstrap 3 методы collapse.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 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>

Для меня работал тег-toggle = "collapse" data-target = ". navbar-collapse.in" с тегом <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>

В каждой выпадающей ссылке поместите data-toggle = "collapse" и 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;
  }
}

Вот как я это сделал. Если есть более плавный путь, пожалуйста, скажите мне.

Внутри тегов <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>

100% рабочая: -

Добавить в HTML

<div id="myMenu" class="nav-collapse">

Javascript

 $(function(){ 
 var navMain = $("#myMenu");
 navMain.on("click", "a", null, function () {
     navMain.collapse('hide');
 });
});

$("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');
  }
});

Это лучшее решение, которое я использовал.

$(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
        });

    });

$(function() {
    $('.nav a').on('click touchstart', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

//ПРИМЕЧАНИЕ. Я добавил "touchstart" для мобильного телефона. touchstart/end не имеет задержки

Для тех, кто заметил, что настольные навигаторы мерцают при использовании этого решения:

$('.nav a').on('click', function(){
    $(".navbar-collapse").collapse('hide');
}); 

Простым решением этой проблемы является ссылка на свернутый навигатор только путем проверки наличия "in":

$('.navbar-collapse .nav a').on('click', function(){
    if($('.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

Это разрушает навигационную панель при нажатии, когда навигационная панель находится в мобильном режиме, но оставит в покое версию для настольного ПК. Это позволяет избежать мерцания, которое многие люди видели в настольных версиях.

Кроме того, если у вас есть панель навигации с выпадающими меню, вы не сможете их увидеть, так как навигационная панель будет скрыта, как только вы нажмете на них, поэтому, если у вас есть выпадающие меню (как и я!), используйте следующее:

$('.nav a').on('click', function(e){
    if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

Это ищет наличие раскрывающегося класса над ссылкой, нажатой в DOM, если она существует, тогда ссылка намеревалась запустить выпадающее меню, и, следовательно, меню не будет скрыто. Когда вы нажимаете на ссылку в раскрывающемся меню, навигационная панель будет спрятаться правильно.

Я разместил решение, которое работает с Aurelia здесь: https://stackoverflow.com/questions/21203111/bootstrap-3-collapsed-menu-doesnt-close-on-click

Проблема заключается в том, что вы не можете просто добавить data-toggle="collapse" и data-target="#navbar" к вашим элементам. И 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);
      }
    }
  }
}

Еще одно быстрое решение для 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
            }
        });
    });
});

Добавьте идентификатор затем к каждому

<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 устанавливает класс .in в элементе 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');
    }
})

Пользователи 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 + 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

Это скрывает крах Nav, а не анимирует его, но ту же концепцию, что и выше.

JS:

$('.nav a').on('click', function () {
    $("#funk").toggleClass('in collapse');
});

HTML:

<div class="navbar-collapse" id="funk">

Я предпочитаю это на сайтах одной страницы, потому что я использую localScroll.js, который уже анимируется.

Я проверил в меню, открыв, проверив класс 'in', а затем запустил код.

$('.navbar-collapse a').on('click', function(){
    if ( $( '.navbar-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

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