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

Это не раскрывающееся подменю, категория класса li, как на картинке:

Выбирая категорию из адаптивного меню (шаблон - это всего лишь одна страница), я хочу автоматически скрывать навигационный коллапс при нажатии. Также прогуляйтесь, чтобы использовать в качестве навигации, так как шаблон имеет только одну страницу. Я ищу решение, которое не влияет на это, вот HTML-код меню:

    

  
    
      <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>
      
        
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#portfolio">Portfolio</a>
          <a href="#services">Services</a>
          <a href="#contact">Contact</a>
          
        
        
      
      
    
    
  
  


 Camel04 окт. 2014 г., 10:44
Вы можете увидеть мой ответ здесьstackoverflow.com/questions/14248194/...
 WooCaSh22 мая 2013 г., 15:12
рад это слышать.
 caw30 сент. 2014 г., 15:14
Если вы неЯ не хочу пытаться сравнить все эти решения здесь,изменить № 1 из этого ответа это то, что вы должны сделать.
 WooCaSh22 мая 2013 г., 01:51
а мое решение работает или нет?
 Zim06 мар. 2018 г., 18:09
 Tim Vitor22 мая 2013 г., 03:18
@WooCaSh Работал, скорее, порядок их решения custom.js был неправильным, я заметил $ ('навигация). На ('нажмите», function () {и в моем случае это класс, тогда $ (', навигация). на (' нажмите ", function () {. спасибо, вы мне очень помогли!
 chrylis16 дек. 2013 г., 05:59

Ответы на вопрос(30)

<li>
  <a href="#about">About</a>
</li>

в

<li>
  <a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>

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

Ref:https://github.com/twbs/bootstrap/issues/9013

 philip oghenerobo balogun14 нояб. 2016 г., 17:28
Это больше не будет работать. использованиеdata-target=".navbar-collapse.in" как с новым стандартом начальной загрузки..in класс для предотвращения анимации на рабочем столе
 maxathousand22 мая 2017 г., 23:03
Я использовал это решение в моей ситуации, но использовал идентификатор моегоdiv.navbar-collapse элемент какdata-target параметр.
 Daniel Arechiga27 июн. 2017 г., 21:36
Это лучшее решение для тех, кто использует Angular, где смешивание jquery не рассматривается
 wahwahwah14 апр. 2015 г., 20:41
Согласовано. Это правильный способ сделать это. Нет необходимости в jQuery. Я неЯ не понимаю, почему это так мало привлекает внимания.
 Bradley17 февр. 2015 г., 04:19
Это должен быть принятый ответ. Прекрасно работает со стандартными соглашениями о загрузке.
 Gone Coding22 сент. 2015 г., 18:54
На "стандарт» Главная страница Visual Studio, это приведет к исчезновению меню бургера и отсутствию пунктов меню. Этот ответ работает только с определенной конфигурацией меню (которую вы не приводите в качестве примера).
$(function() {
    $('.nav a').on('click touchstart', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

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

Мобильный просмотр:как скрыть переключение навигации в bootstrap + выпадающий список + jquery + 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

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

 add data-target="myMenu" data-toggle="collapse"

    
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#portfolio">Portfolio</a>
      <a href="#services">Services</a>
      <a href="#contact">Contact</a>
    

https://stackoverflow.com/a/41465905/6466378

Проблема в том, что вы не можете просто добавитьdata-toggle="collapse" а такжеdata-target="#navbar" к вашим элементам. И jQuery не работает в среде Aurelia или Angular.

Лучшее решение для меня было создать пользовательский атрибут, который слушает соответствующий медиа-запрос и добавляет вdata-toggle="collapse"атрибут при желании:

<a href="#" ...="" collapse-toggle-if-less768="" data-target="#navbar"> ...</a>

Пользовательский атрибут с Aurelia выглядит следующим образом: I '

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

Я просто копирую 2 атрибута (btn-navbardata-toggle="collapse" data-target=".nav-collapse.in") на каждой ссылке вот так:


  
    <a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a>
    <a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a>
    <a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a>
    <a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a>
    <a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a>
  

вБутстрап 4 Навбар,in изменился наshow поэтому синтаксис будет:

data-toggle="collapse" data-target=".navbar-collapse.show"

 SKG12 мар. 2019 г., 17:30
Потрясающие! Я добавил Jquery, у меня были проблемы с анимацией, и вы спасли день! ура
 kuceram29 мар. 2016 г., 16:37
Дон»не забудьте заменить .nav-collapse на .navbar-collapse для начальной загрузки 3
 Zeus14 нояб. 2018 г., 07:36
Надеть это на <ul data-toggle = "коллапс» данный целевой =».navbar-collapse.show "> работает для всех <li> под ним вы можете избежать повторения этой строки.
 Jean-Bernard Jansen04 июл. 2016 г., 23:27
Гораздо лучше, чем ручной скрипт, довольно хак
 James Brewer18 февр. 2015 г., 03:10
Хорошо работает на мобильных устройствах, но также вызывает анимацию сворачивания навигационной панели на рабочем столе, что нежелательно.
 Daghall21 мар. 2015 г., 23:16
@JamesBrewer Чтобы избежать анимации коллапса на настольной версии, добавьте.in к цели данных:data-toggle="collapse" data-target=".nav-collapse.in"
 mlo5503 авг. 2014 г., 10:59
Хороший, работает хорошо, спасибо.
 Bruno Wolff25 апр. 2019 г., 20:05
@ Zeus подход был единственным, который работал на 100% на обоих! Спасибо!
 trixtur18 июл. 2016 г., 06:16
Это должен быть принятый ответ! Спасибо за публикацию!
 trante19 апр. 2014 г., 10:31
Добавлениеdata-toggle а такжеdata-target к <li> это более чистое решение. Благодарю.
 Stalin Gino08 дек. 2015 г., 09:41
Мне нравится эта версия без ручного скрипта. Лучше с другими фреймворками
 lostintranslation20 мар. 2015 г., 17:05
Дает анимацию навигационной панели (быстрое развертывание / свертывание) при щелчках элементов навигационной панели. Это происходит даже тогда, когда кнопка свертывания не отображается. Не идеально.
 Alesana02 авг. 2017 г., 00:08
Будет ли добавление этого к элементу body плохой идеей, если я захочу свернуть меню, если кто-нибудь щелкнет где-нибудь на странице?
Решение Вопроса

попробуй это:

$('.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
});
 Braham Dev Yadav01 мая 2017 г., 21:03
когда меню открыто, вы можете видеть, что есть "в" активный класс  просто нужно убратьв" там и это сработало$('.navbar-collapse').removeClass('in');
 Mike Hopper11 авг. 2014 г., 02:29
Если у вас есть выпадающие списки на панели навигации, вы нене хочу сворачиваться при нажатии на выпадающий. Это сработало для меня: $ ('.nav: нет (.dropdown)).на(...
 Richard10 окт. 2013 г., 21:43
ОБНОВЛЕНИЕ: Обычным селектором для начальной загрузки 3 является .navbar-toggle, поэтому $ (".navbar-тумблер») .Click ();
 Amro Shafie09 дек. 2014 г., 21:59
Это сработало отлично. Благодарю.
 SaurabhLP29 окт. 2013 г., 11:50
этот трюк вызывает ошибку на рабочем столе ... onclick navs переключает высоту также ...
 xBill31 окт. 2014 г., 20:34
Спасибо @Ronan, после того, как вы опробовали все решения, ваше решение является лучшим для мобильных и настольных компьютеров. Вы спасли мой день и должны получитьправильный ответ".
 Rohan23 окт. 2014 г., 01:02
Это вызывает проблемы в панели навигации. Лучше использовать $ ('.nav-коллапс») .Collapse (»скрывать'); по событию клика, а не по нажатию кнопки переключения.
 mlapaglia16 февр. 2015 г., 20:41
Когда Navbar открыт в "рабочий стол» Режим будет мигать или закрыться, а затем снова откроется при использовании этого.
 Nrzonline12 сент. 2017 г., 11:24
Падение навигации должно быть сделано с помощью начальной загрузки. Вы'Построим его с помощью начальной загрузки, по возможности исправим с начальной загрузкой: посмотрите на Zu1779 'ответ и комментарии. Гораздо чище и понятнее. Способ справиться с этим доступен в самой начальной загрузке, почему игнорировать это?
 Andrew Boes13 сент. 2013 г., 21:59
К вашему сведению, это неработает во всех случаях. Если окно изменено в размерах и оно вызывает мобильное меню, оно будет открыто по умолчанию.
 Michael11 мая 2016 г., 23:28
JQuery (».navbar-коллапс») .AddClass (»коллапс»); был самым эффективным методом в Bootstrap 3.
 Clain Dsilva05 авг. 2013 г., 08:44
Это сработало отлично. Спасибо WooCaSh. Также просто предложил добавить "." к коду перед $ ('навигация) => $ (».nav a '). [В селекторе классов не было точки "."]
 candlejack12 авг. 2015 г., 20:27
На самом деле,$('#navbar').collapse('hide'); сделать трюк!

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

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

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

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

if ($('.navbar-toggler').is(":visible")) $('.navbar-toggler').click();

Добавление data-toggle = "коллапс» данный целевой =».navbar-collapse.in» к тегу<a></a> работал на меня.



        
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        
    
            
            
                <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" class="nav-link">Home
                </a>
            
    

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

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

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

Лучше использовать стандартные методы collapse.js (V3 документы,V4 документы):

$('.nav a').click(function(){
    $('.nav-collapse').collapse('hide');
});
 Andrew12 февр. 2015 г., 16:27
Определенно лучше, чем использование функций щелчка! Это'Лучше всего свести риск к минимуму, взаимодействуя только с тем, что вы хотите изменить. Событие щелчка может привести к выполнению дополнительных нежелательных функций. Didn»не знаю об этом методе провала, спасибо.
 alexandre198518 авг. 2017 г., 15:17
Для меня на моей странице начальной загрузки 4, а не.nav a Я должен был использовать.navbar a
 mneute26 апр. 2015 г., 14:51
Это лучшее решение, которое ямы нашли до сих пор. Спасибо. Просто небольшое улучшение, которое я сделал: заменить.nav a селектор по этому:.nav a:not(.dropdown-toggle)
 Volomike11 мар. 2019 г., 20:43
Дон»ты имеешь в виду.navbar-collapse и не ?.nav-collapse
 Vadim P.12 мар. 2019 г., 16:41
Нет я нет, потому что.nav-collapse был использован в примере кода вопроса.

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

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

Внутри<a></a> теги, где ссылки для меню, я добавил этот код:

onclick="$('.navbar-toggle').click()"

Сохраняет слайд анимацию. Так что при полном использовании это будет выглядеть так:



    
        
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        
        <a class="navbar-brand" href="home.html">My Cool Site</a>
    
    
        
            <a href="home.html" onclick="$('.navbar-toggle').click()"> Home</a>
            <a href="aboutus.html" onclick="$('.navbar-toggle').click()">About Us</a>
        
    

Это хорошо сработало для меня. Это так же, как принятый ответ, но устраняет проблему, связанную с видом на рабочий стол / планшет

$('.navbar-nav a').on('click', function () {
        if (window.innerWidth 
 Alex Tape25 мар. 2015 г., 12:49
window.innerWidth <= 767 лучше;) или window.innerWidth < 768
 Erikas30 апр. 2017 г., 20:45
Это должно быть выбрано как лучший ответ. Тем не менее, это нет работать с выпадающими. Я исправил это, заменив селектор на: $ ('.navbar-нав»).находить('а: нет (».dropdown-тумблер ") ')

я меня.

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

На каждую выпадающую ссылку ставим data-toggle = "коллапс» и data-target = ".nav коллапса» где nav-collapse - это имя, которое вы даете в раскрывающемся списке.


      <a href="#home">Home</a>
      <a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a>
      <a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a>
      <a href="#services" data-toggle="collapse" data-target="nav-collapse">Services</a>
      <a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a>
      
  

Это прекрасно работает на экране, который имеет выпадающий список, как на экранах мобильных устройств, но на настольном компьютере и планшете создает эффект flickr. Это потому, что применяется класс .collapsing. Чтобы удалить flickr, я создал медиазапрос и вставил переполнение, скрытое в сворачивающемся классе.

@media (min-width: 768px) {
.collapsing {
    overflow: inherit;
  }
}

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

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

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

$('.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, если она существует, то ссылка намеревалась запустить выпадающее меню, и, следовательно, меню не 'т спрятано. Если щелкнуть ссылку в раскрывающемся меню, панель навигации будет правильно скрыта.

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

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

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

});
 antsyawn14 сент. 2015 г., 08:07
Отлично работает для меня, спасибо :)
 AME07 окт. 2015 г., 14:30
Мало того, что это прекрасно работает, но этоs также единственное решение, которое сработало для меня, bootstrap> 3.
 Steve M19 окт. 2014 г., 16:04
Элементы считаются видимыми, если они занимают место в документе. " Ваш код был предназначен для предотвращения коллапса, если navbar-collapse не виден на экране, но это не так.

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


  
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#portfolio">Portfolio</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
  

Супер чистый, JavaScript не требуется. Прекрасно работает, пока вашnav a у элементов достаточно обивки для толстых пальцев, и вы непредотвращение всплывающих событий клика черезe.stopPropagation() когда пользователи нажимают наnav a Предметы.

 JoshJoe28 авг. 2018 г., 16:12
В Bootstrap 4 это будет
 Vítor de Almeida05 июл. 2016 г., 13:30
Это правильный способ начальной загрузки этого поведения.
 Dave19 янв. 2017 г., 21:04
Я хотел бы предложить изменить цель, чтобы включитьв класс также. Это предотвратит странное поведение настольных версий.data-target=".nav-collapse.in"
 stt10602 окт. 2017 г., 22:36
Самое приятное в этом то, что он работает с угловым 4 's routerLink, тогда как другие решения нет!
 Bishbulb14 апр. 2016 г., 21:42
Элегантное решение!

Попробуйте это> Bootstrap 3

Блестящий точно, что я искал, однако у меня были некоторые столкновения с javascript и модалом начальной загрузки, это исправило это.

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

Надеюсь это поможет.

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

Проверено на Bootstrap 3.3.6 - работаs!

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

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

 xinthose22 февр. 2017 г., 18:40
Это работает для меня. У меня есть навигационная панель на каждом просмотре кендо, поэтому мне нужно закрыть их наbeforeShow событие.

Добавить в HTML


Javascript

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

используя 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: нажатые кнопки в итоге окажутся не теми, на которые я фактически нажал, следовательно, сломаю ссылки. Плюс это добавит класс .show к некоторым другим не связанным выпадающим спискам в моей навигации, что приведет к еще более странным вещам.

Пытался изменить div на liПытался e.preventDefault () и e.stopPropagation ()Попробовал и попробовал больше

Ничто не сработает.

Так что вместо этого у меня была (пока) изумительная идея сделать это:

$(window).on('hashchange',function(){
   $(".navbar-collapse.show").collapse('hide');
});

У меня уже было что-то в этой функции hashchange, просто мне нужно было добавить эту строку.

На самом деле он делает именно то, что мне нужно: свернуть меню при изменении хеша (то есть произошел щелчок, ведущий куда-то еще). Это хорошо, потому что теперь в моем меню могут быть ссылки, которыеСвернуть это.

Кто знает, может это кому-нибудь поможет в моей ситуации!

И спасибо всем, кто принял участие в этой теме, много информации можно узнать здесь.

Это скрывает навигационный коллапс вместо анимации, но та же концепция, что и выше

JS:

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

HTML:


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

$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});
 Bruno Dias08 апр. 2014 г., 03:11
Это лучшее решение, потому что оно предотвращает сбои, когда ссылки видны.
 PhillipOReilly13 дек. 2017 г., 20:41
Я боролся с этой проблемой часами! Это сделал трюк!
 muoki_D05 нояб. 2017 г., 13:25
Спасибо приятель. ты спас мой мир !!!
 Xdg06 янв. 2017 г., 10:41
На Bootstrap 4 это.navbar-toggler , Во всяком случае, супер рабочий код, спасибо!

методы collapse.js с использованием.navbar-collapse как складной элемент, который вы хотите скрыть, как показано ниже.

Другие решения могут вызвать другие нежелательные проблемы с отображением или функционированием элементов на вашей веб-странице. Поэтому, хотя некоторые решения могут показаться для решения вашей первоначальной проблемы, они могут очень хорошо представить другие, поэтому убедитесь, что вы выполнили тщательное тестирование своего сайта после любого исправления.

Чтобы увидеть этот код в действии:

Нажмите "Запустить этот фрагмент кода " ниже.Нажмите "Полная страница" кнопка.Окно масштабирования, пока не активируется раскрывающийся список.Затем выберите пункт меню и вуаля!

Ура!

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

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

 Cody16 мар. 2016 г., 18:17
Это намного лучше, чем принятый в настоящее время ответ. С этим я получаю призрачную анимацию на рабочем столе.

Ваш ответ на вопрос