Nascondi Twitter Bootstrap nav collapse on click

Questo non è un menu a discesa del sottomenu, la categoria è di classe li come in figura:

Selezionando una categoria dal menu reattivo (il modello è solo una pagina), voglio nascondere automaticamente la compressione del nav quando si fa clic. Passeggia anche da usare come navigazione, poiché il modello ha solo una pagina. Cerco una soluzione che non influisca, ecco il codice HTML del 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 -->

prova questo:

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

Ho appena replicato i 2 attributi di btn-navbar( data-toggle="collapse" data-target=".nav-collapse.in") su ogni link in questo modo:

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

Nel Bootstrap 4 Navbar , inè stato modificato in showmodo che la sintassi sia:

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

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

Meglio usare i metodi collapse.js predefiniti ( documenti V3 , documenti V4 ):

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

Ancora più elegante senza una leccata di codice duplicato, è semplicemente applicare gli attributi data-toggle="collapse"e data-target=".nav-collapse"al nav stesso:

<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 pulito, non è richiesto JavaScript. Funziona alla grande, purché i tuoi nav aelementi abbiano abbastanza imbottitura per dita grosse e non stai impedendo il gorgogliamento degli eventi di clic e.stopPropagation()quando gli utenti fanno clic sugli nav aelementi.

Aggiorna il tuo

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

per

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

Questo semplice cambiamento ha funzionato per me.

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

La navigazione dovrebbe essere chiusa ogni volta che un utente fa clic in un punto qualsiasi del corpo, non solo elementi di navigazione. Dire che il menu è aperto, ma l'utente fa clic nel corpo della pagina. L'utente si aspetta di vedere la chiusura del menu.

Devi anche assicurarti che il pulsante di attivazione / disattivazione sia visibile, altrimenti nel menu viene visualizzato un salto.

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

});

Testato su Bootstrap 3.3.6 - funziona!

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

Prova questo> Bootstrap 3

Brillante esattamente quello che stavo cercando, tuttavia ho avuto alcuni scontri con il javascript e il bootstrap modale, questo ha risolto il problema.

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

Spero che questo ti aiuti.

Questo ha funzionato bene per me. È uguale alla risposta accettata ma risolve il problema relativo alla vista desktop / tablet

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

Penso che sia meglio usare i metodi collapse.js predefiniti di Bootstrap 3 usando .navbar-collapsecome elemento comprimibile che desideri nascondere come mostrato di seguito.

Altre soluzioni possono causare altri problemi indesiderati con il modo in cui gli elementi visualizzano o funzionano nella tua pagina web. Pertanto, mentre alcune soluzioni potrebbero sembrare in grado di risolvere il tuo problema iniziale, potrebbe benissimo introdurne altre, quindi assicurati di eseguire test approfonditi del tuo sito dopo qualsiasi correzione.

Per vedere questo codice in azione:

1. Premi "Esegui questo frammento di codice" di seguito.
2. Premere il pulsante "Pagina intera".
3. Ridimensiona la finestra fino all'attivazione del menu a discesa.
4. Quindi selezionare un'opzione di menu e voilà!

Saluti!

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

Su ciascun collegamento a discesa, inserisci data-toggle = "collapse" e data-target = ". Nav-collapse" dove nav-collapse è il nome che gli dai all'elenco a discesa.

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

Funziona perfettamente su schermo che ha un menu a discesa come schermi mobili, ma su desktop e tablet crea un flickr. Questo perché viene applicata la classe .collapsing. Per rimuovere il flickr ho creato una query multimediale e ho inserito un overflow nascosto alla classe collassata.

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

Aggiunta di data-toggle = "collapse" data-target = ". Navbar-collapse.in" al tag ha <a>funzionato per me.

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

Ecco come l'ho fatto. Se esiste un modo più fluido, per favore, dimmelo.

All'interno dei <a>tag in cui sono presenti i collegamenti per il menu ho aggiunto questo codice:

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

Conserva l'animazione della diapositiva. Quindi in pieno uso sembrerebbe così:

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

// NOTA Ho aggiunto il "touchstart" per il tocco mobile. touchstart / end non ha ritardi

Questa è la migliore soluzione che ho usato.

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

    });

Per coloro che hanno notato sfarfallio delle navbar desktop durante l'utilizzo di questa soluzione:

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

Una semplice soluzione a questo problema è fare riferimento alla barra di navigazione compressa solo verificando la presenza di 'in':

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

Questo fa collassare la barra di navigazione al clic quando la barra di navigazione è in modalità mobile, ma lascerà da sola la versione desktop. Questo evita lo sfarfallio che molte persone hanno visto verificarsi nelle versioni desktop.

Inoltre, se hai una barra di navigazione con menu a discesa non sarai in grado di vederli poiché la barra di navigazione verrà nascosta non appena fai clic su di essi, quindi se hai menu a discesa (come faccio io!), Utilizza quanto segue:

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

Ciò cerca la presenza della classe a discesa sopra il collegamento su cui è stato fatto clic nel DOM, se esiste, quindi il collegamento intendeva avviare un menu a discesa e di conseguenza il menu non è nascosto. Quando fai clic su un collegamento nel menu a discesa, la barra di navigazione si nasconderà correttamente.

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

Aggiungi in HTML

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

Javascript

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

Questo nasconde il collasso nav invece di animarlo ma lo stesso concetto della risposta sopra

JS:

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

HTML:

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

Preferisco questo su siti a pagina singola perché utilizzo localScroll.js che già anima.

Visualizzazione mobile: come nascondere la navigazione alternata nel bootstrap + menu a discesa + jquery + scrollto con elementi di navigazione che puntano a ancore / ID sulla stessa pagina , un modello di pagina

Il problema che stavo sperimentando con una delle soluzioni di cui sopra era che stanno comprimendo solo le voci del sottomenu, mentre il menu di navigazione non si comprime.

Quindi ho fatto il mio pensiero .. e cosa possiamo osservare? Bene, ogni volta che noi / gli utenti facciamo clic su un collegamento a scorrimento, vogliamo che la pagina scorra in quella posizione e contemporaneamente, comprimiamo il menu per ripristinare la visualizzazione della pagina.

Bene ... perché non assegnare questo lavoro alle funzioni scrollto? Facile :-)

Quindi nei due codici

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

e

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

Ho appena aggiunto lo stesso comando in entrambe le funzioni

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

(complimenti a uno dei collaboratori di cui sopra)

in questo modo (lo stesso dovrebbe essere aggiunto a entrambe le pergamene)

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

se vuoi vederlo in azione, dai un'occhiata al recupero dati da NAS

Gli utenti Bootstrap3 provano il codice riportato di seguito. Ha funzionato per me.

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 imposta una .inclasse sull'elemento Collapse per attivare l'animazione - per aprirla. Se rimuovi semplicemente la .inclasse, l'animazione non viene eseguita, ma nasconderà l'elemento, non esattamente quello che desideri.

Probabilmente più veloce per eseguire ifun'istruzione per verificare se la classe bootstrap predefinita .inè stata impostata sull'elemento.

Quindi questo codice dice solo:

se il mio elemento ha la classe .inapplicata, chiudila attivando l'animazione Bootstrap predefinita. Altrimenti esegui l'azione / animazione Bootstrap predefinita per aprirla

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

Aggiungi un ID quindi a ciascuno

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

Un'altra soluzione rapida per Bootstrap 3. * potrebbe essere:

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

Ho pubblicato una soluzione che funziona con Aurelia qui: https://stackoverflow.com/a/41465905/6466378

Il problema è che non puoi semplicemente aggiungere data-toggle="collapse"e data-target="#navbar"ai tuoi elementi. E jQuery non funziona in un ambiente Aurelia o angolare.

La migliore soluzione per me è stata quella di creare un attributo personalizzato che ascolta la corrispondente media query e aggiunge l' data-toggle="collapse"attributo, se desiderato:

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

L'attributo personalizzato con Aurelia è simile al seguente:

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

Sono su Bootstrap 4, usando fullPage.js con un nav superiore fisso, e ho provato tutto ciò che è elencato qui, con risultati contrastanti.

• Ho provato il modo migliore e pulito:

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

  Il menu sarebbe crollato, ma i collegamenti href non avrebbero portato da nessuna parte.

• Ho provato gli altri modi logici:

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

  Ci sarebbe un comportamento strano a causa dell'evento touchstart: i pulsanti cliccati finirebbero per non essere quelli su cui ho effettivamente cliccato, interrompendo quindi i collegamenti. Inoltre aggiungerebbe la classe .show ad alcuni altri menu a discesa non correlati nel mio navigatore, causando alcune cose più strane.

• Ho provato a cambiare div in li
• Ho provato a e.preventDefault () e e.stopPropagation ()
• Ho provato e provato di più

Niente avrebbe funzionato.

Quindi, invece, ho avuto (finora) la meravigliosa idea di farlo:

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

Avevo già roba in quella funzione di hashchange, quindi ho dovuto solo aggiungere questa riga.

In realtà fa esattamente quello che voglio: comprimere il menu quando cambia l'hash (ovvero si è verificato un clic che porta da qualche altra parte). Il che è buono, perché ora posso avere collegamenti nel mio menu che non lo comprimono.

Chissà, forse questo aiuterà qualcuno nella mia situazione!

E grazie a tutti coloro che hanno partecipato a quel thread, molte informazioni possono essere apprese qui.

Nella maggior parte dei casi, dovrai chiamare la funzione di attivazione / disattivazione solo se il pulsante di attivazione / disattivazione è visibile ...

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

Ho controllato il menu viene aperto controllando la classe 'in' e quindi eseguo il codice.

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

funziona perfettamente.