Ukryj nawigację Twitter Bootstrap zwiń po kliknięciu

To nie jest rozwijane menu podrzędne, kategoria to klasa li jak na obrazku:

Wybierając kategorię z menu responsywnego (szablon to tylko jedna strona), chcę ukryć automatyczne zwijanie nawigacji po kliknięciu. Spaceruj również, aby używać go jako nawigacji, ponieważ szablon ma tylko jedną stronę. Szukam rozwiązania, które nie ma na to wpływu, oto kod HTML menu:

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

Spróbuj tego:

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

Po prostu powielam 2 atrybuty btn-navbar( data-toggle="collapse" data-target=".nav-collapse.in") w każdym linku w ten sposób:

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

W Bootstrap 4 pasku nawigacyjnym , inzmienił się showwięc składnia byłoby:

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

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

Lepiej używać domyślnie collapse.js metod ( V3 docs , V4 Docs ):

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

Jeszcze bardziej eleganckie bez odrobiny zduplikowanego kodu jest po prostu zastosowanie atrybutów data-toggle="collapse"i data-target=".nav-collapse"do samej nawigacji:

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

Super czysty, bez JavaScript. Działa świetnie, o ile twoje nav aelementy mają wystarczająco dużo wyściółki dla grubych palców i nie zapobiegasz bulgotaniu zdarzenia kliknięcia, e.stopPropagation()gdy użytkownicy klikają nav aprzedmioty.

Zaktualizuj swój

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

do

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

Ta prosta zmiana zadziałała dla mnie.

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

Nawigacja powinna być zamykana za każdym razem, gdy użytkownik kliknie gdziekolwiek w treści - nie tylko elementy nawigacji. Menu Powiedz jest otwarte, ale użytkownik klika treść strony. Użytkownik oczekuje zamknięcia menu.

Musisz także upewnić się, że przycisk przełączania jest widoczny, w przeciwnym razie w menu będzie widoczny skok.

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

});

Testowane na Bootstrap 3.3.6 - działa!

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

Spróbuj tego> Bootstrap 3

Genialne, dokładnie to, czego szukałem, jednak miałem kilka kolizji z javascriptem i modalem bootstrap, to naprawiło.

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

Mam nadzieję że to pomoże.

To działało dobrze dla mnie. Jest taka sama jak zaakceptowana odpowiedź, ale rozwiązuje problem związany z widokiem komputera / tabletu

$('.navbar-nav a').on('click', function () {
        if (window.innerWidth <= 768) {
            $(".navbar-toggle").click();
        }
    });

Myślę, że lepiej jest użyć domyślnych Bootstrap 3 metod collapse.js używając .navbar-collapsejako elementu zwijanego, który chcesz ukryć, jak pokazano poniżej.

Inne rozwiązania mogą powodować inne niepożądane problemy ze sposobem wyświetlania lub działania elementów na Twojej stronie internetowej. W związku z tym, chociaż niektóre rozwiązania mogą wydawać się naprawiać początkowy problem, mogą równie dobrze przedstawiać inne, więc po wprowadzeniu jakichkolwiek napraw należy przeprowadzić dokładne testy witryny.

Aby zobaczyć ten kod w akcji:

1. Naciśnij przycisk „Uruchom ten fragment kodu” poniżej.
2. Naciśnij przycisk „Pełna strona”.
3. Skaluj okno, aż uaktywni się lista rozwijana.
4. Następnie wybierz opcję menu i voila!

Twoje zdrowie!

$('.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>

W każdym linku rozwijanym umieść data-toggle = "collapse" i data-target = ". Nav-collapse", gdzie nav-collapse to nazwa, którą nadasz liście rozwijanej.

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

Działa to doskonale na ekranach, które mają menu rozwijane, takie jak ekrany mobilne, ale na komputerach stacjonarnych i tabletach tworzy flickr. Dzieje się tak, ponieważ zastosowano klasę .collapsing. Aby usunąć flickr, utworzyłem zapytanie o media i wstawiłem przepełnienie ukryte w klasie zwijającej.

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

Dodanie data-toggle = "collapse" data-target = ". Navbar-collapse.in" do tagu <a>zadziałało.

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

Oto jak to zrobiłem. Proszę, powiedz mi, czy istnieje prostszy sposób.

Wewnątrz <a>tagów, w których znajdują się linki do menu, dodałem ten kod:

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

Zachowuje animację slajdu. Tak więc w pełnym użyciu wyglądałoby to tak:

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

// UWAGA Dodałem „touchstart” dla mobile touch. touchstart / end nie ma opóźnienia

To najlepsze rozwiązanie, z jakiego korzystałem.

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

    });

Dla tych, którzy zauważyli migotanie pasków nawigacyjnych na pulpicie podczas korzystania z tego rozwiązania:

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

Prostym rozwiązaniem tego problemu jest odwoływanie się do zwiniętego paska nawigacyjnego tylko przez sprawdzenie, czy występuje element „w”:

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

Spowoduje to zwinięcie paska nawigacyjnego po kliknięciu, gdy pasek nawigacyjny jest w trybie mobilnym, ale pozostawi wersję na komputery stacjonarne. Pozwala to uniknąć migotania, które wiele osób było świadkami w wersjach na komputery stacjonarne.

Dodatkowo, jeśli masz pasek nawigacyjny z menu rozwijanymi , nie będziesz w stanie ich zobaczyć, ponieważ pasek nawigacyjny zostanie ukryty zaraz po ich kliknięciu, więc jeśli masz menu rozwijane (tak jak ja!), Użyj następującego:

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

Wyszukuje obecność klasy rozwijanej powyżej klikniętego linku w DOM, jeśli istnieje, to link miał na celu uruchomienie rozwijanego menu, w związku z czym menu nie jest ukryte. Po kliknięciu łącza w menu rozwijanym pasek nawigacyjny zostanie poprawnie ukryty.

$("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% pracy: -

Dodaj w HTML

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

Javascript

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

To ukrywa zwijanie nawigacji zamiast animować ją, ale ta sama koncepcja, co powyższa odpowiedź

JS:

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

HTML:

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

Wolę to na stronach z jedną stroną, ponieważ używam localScroll.js, który już jest animowany.

Widok mobilny: jak ukryć przełączanie nawigacji w bootstrap + menu rozwijane + jQuery + scrollto z elementami nawigacji wskazującymi kotwice / identyfikatory na tej samej stronie , szablon jednej strony

Problem, który eksperymentowałem z którymkolwiek z powyższych rozwiązań polegał na tym, że zwijają one tylko elementy podmenu, a menu nawigacyjne się nie zwija.

Tak więc pomyślałem… i co możemy zaobserwować? Cóż, za każdym razem, gdy my / użytkownicy klikamy link przewijany do łącza, chcemy, aby strona przewijała się do tej pozycji i jednocześnie zwijała menu, aby przywrócić widok strony.

Cóż ... dlaczego nie przypisać tego zadania do funkcji scrollto? Łatwo :-)

Więc w dwóch kodach

// scroll to top action
$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');

i

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

Właśnie dodałem to samo polecenie w obu funkcjach

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

(pochwały dla jednego z powyższych współpracowników)

w ten sposób (to samo należy dodać do obu zwojów)

$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');
if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}
});

jeśli chcesz zobaczyć, jak to działa, po prostu sprawdź to recupero dati da NAS

Użytkownicy Bootstrap3 wypróbowują poniższy kod. U mnie zadziałało.

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 ustawia .inklasę w elemencie Collapse, aby wyzwolić animację - aby ją otworzyć. Jeśli po prostu usuniesz .inklasę, animacja nie zostanie uruchomiona, ale ukryje element - nie jest to dokładnie to, czego chcesz.

Prawdopodobnie szybciej uruchomisz ifinstrukcję, aby sprawdzić, czy domyślna klasa ładowania początkowego .inzostała ustawiona w elemencie.

Więc ten kod mówi tylko:

jeśli mój element ma .inzastosowaną klasę , zamknij ją, wyzwalając domyślną animację Bootstrap. W przeciwnym razie uruchom domyślną akcję / animację Bootstrap otwierającą go

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

Następnie dodaj identyfikator do każdego

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

Innym szybkim rozwiązaniem dla Bootstrap 3. * może być:

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

Opublikowałem rozwiązanie, które działa z Aurelia tutaj: https://stackoverflow.com/a/41465905/6466378

Problem w tym, że nie możesz po prostu dodać data-toggle="collapse"idata-target="#navbar" do swoich elementów a. Ponadto jQuery nie działa w środowisku Aurelia lub Angular.

Najlepszym rozwiązaniem dla mnie było utworzenie atrybutu niestandardowego, który nasłuchuje odpowiedniego zapytania o media i dodaje data-toggle="collapse"atrybut w razie potrzeby:

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

Atrybut niestandardowy z Aurelia wygląda następująco:

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

Jestem na Bootstrap 4, używam fullPage.js ze stałą górną nawigacją i wypróbowałem wszystko, co tutaj wymieniono, z różnymi rezultatami.

• Wypróbowałem najlepszy, czysty sposób:

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

  Menu by się zwaliło, ale linki href nie prowadziłyby do niczego.

• Wypróbowałem logiczne inne sposoby:

  $('myClickableElements').on('click touchstart', function(){
    $(".navbar-collapse.show").collapse('hide');
    // or
    $(".navbar-collapse.show").collapse('toggle');
    // or
    $('.navbar-toggler').click()
  });

  Wystąpiłoby dziwne zachowanie z powodu zdarzenia touchstart: kliknięte przyciski nie byłyby tymi, które faktycznie kliknąłem, co powoduje zerwanie łączy. Dodatkowo dodałoby klasę .show do innych niepowiązanych menu rozwijanych w mojej nawigacji, powodując bardziej dziwne rzeczy.

• Próbowałem zmienić div na li
• Próbowano e.preventDefault () i e.stopPropagation ()
• Próbowałem i próbowałem więcej

Nic by nie działało.

Zamiast tego wpadłem na (jak dotąd) wspaniały pomysł zrobienia tego:

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

Miałem już rzeczy w tej funkcji hashchange, si, po prostu musiałem dodać tę linię.

W rzeczywistości robi dokładnie to, czego chcę: zwija menu, gdy zmienia się hash (tj. Nastąpiło kliknięcie prowadzące do innego miejsca). Co jest dobre, ponieważ mogę teraz mieć linki w moim menu, które go nie zwijają.

Kto wie, może to pomoże komuś w mojej sytuacji!

Dziękujemy wszystkim, którzy wzięli udział w tym wątku, wiele informacji do nauczenia się tutaj.

W większości przypadków będziesz chciał wywołać funkcję przełączania tylko wtedy, gdy przycisk przełączania jest widoczny ...

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

Menu zaewidencjonowane jest otwierane przez zaznaczenie klasy „w”, a następnie uruchomienie kodu.

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

działa świetnie.