Il menu compresso di Bootstrap 3 non si chiude al clic

122

Ho una navigazione più o meno standard da bootstrap 3

<body data-spy="scroll" data-target=".navbar-collapse">
    <!-- ---------- Navigation ---------- -->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="index.html"> <img src="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                </ul>
            </div>
        </div>
    </div>

Crolla normalmente su dispositivi più piccoli. Facendo clic sul pulsante del menu si espande il menu, ma se faccio clic (o tocco) su un collegamento del menu, il menu rimane aperto. Cosa devo fare per chiuderlo di nuovo?

html  css  twitter-bootstrap  navigation 
— Paranoia
fonte
5
la risposta di user3669917 è sicuramente la risposta più semplice e diretta!
— Thomas
1
— Inanc Gumus

Risposte:

48

L'impostazione predefinita di Bootstrap è mantenere il menu aperto quando si fa clic su una voce di menu. È possibile sovrascrivere manualmente questo comportamento richiamando .collapse('hide');l'elemento jQuery che si desidera comprimere.

— VCNinc
fonte
8
Questo è sbagliato, bootstrap attiva automaticamente la classe "collapse". Non hai bisogno di alcun codice jquery aggiuntivo. Se hai un comportamento del genere, significa che qualcosa non va nel tuo codice html (da parte mia stavo includendo due volte jquery e bootstrap, vedi la risposta di @raisercostin).
— RomOne
@RomOne Questa risposta è corretta. Bootstrap non senza chiudere il menu dopo i collegamenti sono scattati per impostazione predefinita. L'altra risposta è applicabile solo se le persone includono erroneamente jQuery due volte, il che non è la risposta corretta a questa domanda.
— Zim
136

Solo per condividere questo dalle soluzioni su GitHub, questa era la risposta popolare:

https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

Questo è collegato al documento, quindi non devi farlo su ready () (puoi aggiungere dinamicamente collegamenti al tuo menu e funzionerà comunque), e viene chiamato solo se il menu è già espanso. Alcune persone hanno segnalato strani lampeggi dove il menu si apre e poi si chiude subito con altro codice che non verificava che il menu avesse la classe "in".

[AGGIORNAMENTO 2014-11-04] apparentemente quando si utilizzano i sottomenu, quanto sopra può causare problemi, quindi quanto sopra è stato modificato in:

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
— Kevin Nelson
fonte
1
Funziona perfettamente. Grazie per la condivisione!
— Rodrigo Chiong
Puoi spiegare '$ (this) .collapse (' hide ');' per favore. Non capisco da dove venga il "collasso"
— timebandit
@ImranNazir, scusa questo è il modo dopo la domanda, ma collapseè un metodo definito da bootstrap e allegato all'oggetto jQuery ... presumibilmente, lo riutilizzano per più scopi (fisarmonica, barra di navigazione, ecc.): Getbootstrap.com/javascript / # collapse-usage
— Kevin Nelson
Il codice aggiornato ha funzionato per me, le risposte di cui sopra no. Grazie!
— RandomUs1r
"[AGGIORNAMENTO 2014-11-04]" ha funzionato. Per quanto riguarda l'altra soluzione dove si consiglia di rimuovere i riferimenti duplicati a bootstrap.js e jquery che non è necessaria la soluzione. Ho trovato questa soluzione per risolvere il problema con meno tempo a disposizione per il debug e con un comportamento più esplicito. Grazie!. Spero che questo ti aiuti come ha aiutato me.
— Nour Lababidi
122

Cambia questo: 

<li><a href="#one">One</a></li>

a questa:

<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>

Questo semplice cambiamento ha funzionato per me.

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

— FullStackDev
fonte
14
Questa soluzione va bene per la visualizzazione Mobile, ma mostra / nascondi animazione su schermi di grandi dimensioni una volta cliccato sul link.
— Ayman Al-Absi
22
@ AymanAl-Absi È necessario aggiungere .inalla fine del data-targetvalore di: data-target=".navbar-collapse.in". Dal commento in questa risposta: stackoverflow.com/a/21797534/89818
— caw
questo funziona benissimo per me ma rompe lo scrollspy, qualche idea del perché potrebbe essere?
— Craig Harley
1
Ha funzionato per me quando ho aggiornato il codice sopra con la risposta @caw. Sto anche usando la funzione scrollspy.
— Niraj
Questa è di gran lunga la soluzione migliore. Nessun javascript, nessun jQuery. Se desideri che un determinato collegamento mantenga il menu aperto, non aggiungere questi parametri. Dovrebbe essere indicato come la migliore risposta. Grazie.
— ed1nh0
55

Ho avuto lo stesso problema ma causato dall'inclusione di due volte bootstrap.js e dei jquery.jsfile.

Con un solo clic l'evento è stato elaborato due volte da entrambe le istanze jquery. Uno ha chiuso e uno ha aperto la levetta.

— raisercostin
fonte
3
Ho avuto lo stesso identico problema ma non mi sono reso conto che sarebbero stati inclusi due volte. Grazie per aver postato questo!
— Brian ONeil
2
Così ha fatto il nostro stagista. Grazie per aver postato questo.
— Teisman
2
Uomo! Ho fatto la stessa cosa - credo di essere tornato a fare lo stagista!
— Dicer
2
Così utile! Ci lavoravo da giorni. Questo può essere molto comune quando si utilizza un modello di barra di navigazione. State attente persone! :)
— Matt Butler
2
Questo dovrebbe essere contrassegnato come la migliore risposta. Ho avuto lo stesso problema con la rimozione di bootstrap.js ha risolto il problema
— katwekibs
17 
$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

Ciò aiuterebbe a gestire il menu a discesa nella barra di navigazione

— Chakradhar Vyza
fonte
Questo ha risolto il mio problema per cui l'utilizzo di bootstrap con javascript da una presentazione jssor creava problemi. Questo codice crea anche un effetto interessante durante l'espansione e la compressione del menu mobile.
— Adam West
Grazie @ Chakradhar, mi ha fatto risparmiare tempo.
— Omar Bahir
Grazie, ho dimenticato che Laravel 5.5 JS include B e Jquery nel file js principale.
— Jack Vial
12

Sto avendo / ho avuto problemi simili con Bootstrap 4, alpha-6 e la risposta di Joakim Johansson sopra mi ha fatto iniziare nella giusta direzione. Nessun javascript richiesto. Mettere data-target = ". Navbar-collapse" e data-toggle = "collapse" nel tag div all'interno del nav, ma circondando i link / pulsanti, ha funzionato per me.

<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
   <a class="nav-item nav-link" href="#">Menu Item 1</a>
   ...
</div>
Espandi lo snippet

— Paolo
fonte
Il tuo post mi ha aiutato molto. Questo mi ha risolto <body data-toggle = "collapse" data-target = ". Navbar-collapse">
— Dessus
Questo è stato già pubblicato 3 anni fa. Inoltre, interrompe l'animazione nella visualizzazione non mobile.
— Bevor
6

So che questa domanda è per Bootstrap 3 ma se stai cercando una soluzione per Bootstrap 4 , fallo:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
— Syed
fonte
Sto usando BS4 beta e il tuo codice funziona perfettamente. Ho provato tutte le altre soluzioni suggerite qui senza fortuna. Apparentemente BS4 è cambiato abbastanza da non applicare altre soluzioni.
— Bicycle Dave
Per rilevanza e per mantenere le cose in linea con le informazioni aggiornate - Questa dovrebbe essere la risposta migliore.
— Ricky
@ Ricky OP ha specificato Bootstrap 3, non 4.
— Malavos
Per i menu con menu a discesa ho usato questo:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
— James Wilkins
5

Ho avuto lo stesso problema, stavo usando jQuery-1.7.1e bootstrap 3.2.0. Ho cambiato la mia versione di jQuery alla versione latest ( jquery-1.11.2) e tutto funziona bene.

— Densol
fonte
5

L'ho fatto 

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});
— weaveoftheride
fonte
4

Sebbene la soluzione pubblicata in precedenza per modificare la voce di menu stessa, come di seguito, funzioni quando il menu si trova su un piccolo dispositivo, ha un effetto collaterale quando il menu è a tutta larghezza ed espanso, ciò può comportare una barra di scorrimento orizzontale che scorre sul tuo voci di menu . Le soluzioni javascript non hanno questo effetto collaterale.

<li><a href="#one">One</a></li> to 
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>

(scusa per aver risposto in questo modo, volevo aggiungere un commento a quella risposta, ma, sembra non ho credito sufficiente per fare osservazioni)

— Wim Van Houts
fonte
2 
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
— Chit
fonte
controlla la nuova versione Matthias S :-)
— Chit
@bfontaine Per prima cosa, devi aggiungere id nel tuo menu div, e quando fai clic sul tuo menu, dopotutto il menu verrà nascosto. Ad esempio: - Quando fai clic sul menu Chi siamo, la scheda del menu di riposo verrà nascosta.
— Chit
1
grazie, ma per favore scrivilo nella tua risposta;)
— bfontaine
1

Nel caso in cui desideri sovrascrivere manualmente questo comportamento chiamando .collapse ('hide') all'interno della direttiva di un angular, ecco il codice:

file javascript:

angular
  .module('yourAppModule')
  .directive('btnAutoCollapse', directive);

function directive() {
  var dir = {
    restrict: 'A',
    scope: {},
    link: link
  };
  return dir;

  function link(scope, element, attrs) {    
    element.on('click', function(event) {              
      $(".navbar-collapse.in").collapse('hide');
    });
  }
}

html: 

<li class="navbar-btn">
     <a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>
— Mirna De Jesus
fonte
1

Assicurati di utilizzare l'ultima versione di bootstrap js. Stavo affrontando lo stesso problema e il solo aggiornamento del file bootstrap.js da bootstrap-3.3.6 ha fatto la magia.

— Aman Arun
fonte
1

Se desideri che la navigazione si attivi solo quando viene utilizzata su uno schermo mobile, basta aggiungere data-toggle="collapse"e data-target="#navbar"ai tuoi elementi a funzionerà sullo schermo mobile, ma ti darà uno strano sfarfallio quando clicchi su uno schermo desktop. Le soluzioni jQuery non funzionano bene se ti trovi in ​​un ambiente Aurelia o Angular.

La soluzione migliore per me era creare un attributo personalizzato che ascolta la query multimediale corrispondente e aggiunge l' data-toggle="collapse"attributo se lo si desidera:

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

L'attributo personalizzato con Aurelia ha questo aspetto:

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);
      }
    }
  }
}
Espandi lo snippet

— halllo
fonte
0

Ho scoperto che dopo molte lotte, tentativi ed errori, la migliore soluzione per me su jsfiddle. Link all'ispirazione su jsfiddle.net . Sto usando la barra di navigazione di bootstrap con barra di navigazione fissa in alto con compressione e attivazione / disattivazione dell'hamburger. Ecco la mia versione su jsfiddle: jsfiddle Scrollspy navbar . Stavo ottenendo solo le funzionalità di base utilizzando le istruzioni su getbootsrap.com. Per me, il problema era principalmente nelle direzioni vaghe e js consigliate dal sito getbootstrap. La parte migliore è stata che l'aggiunta di questo bit in più di js (che include alcuni di ciò che è menzionato nei thread sopra) ha risolto diversi problemi di Scrollspy per me, tra cui:

  1. Il menu di navigazione compresso / attivato si nasconde quando si fa clic sulla "sezione" di navigazione (ad es. Href = "# foobar") (problema che riguarda questo thread).
  2. La "sezione" attiva è stata evidenziata con successo (es. Js creata con successo class = "active")
  3. La fastidiosa barra di scorrimento verticale che si trova sul navigatore compresso (solo su schermi piccoli) è stata eliminata.

NOTA: Nel codice js mostrato di seguito (dal secondo collegamento jsfiddle nel mio post):

topMenu = $ ("# myScrollspy"),

... il valore "myScrollspy" deve corrispondere a id = "" nel tuo HTML in questo modo ...

<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">

Ovviamente puoi cambiare quel valore con quello che preferisci.

— Adam Calihman
fonte
0

Tutto ciò di cui hai bisogno è data-target = ". Navbar-collapse" nel pulsante, nient'altro.

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
— Marodo
fonte
+1: Funziona anche aggiungendo data-toggle = "collapse" data-target = ". Navbar-collapse" a <a /> o nel mio caso <Link /> in Meteorjs con React, grazie.
— Joe L.
si funziona <a/>ma non ha funzionato <NavLink/>, crolla ma, <NavLink/>non funziona più, qualche idea perché?
— La piramide
0

Questo è il codice che ha funzionato per me:

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})
— Roddy P. Carbonell
fonte
0

Ho avuto lo stesso problema, assicurati che bootstrap.js sia incluso nella tua pagina html. Nel mio caso il menu si è aperto ma non si è chiuso. Non appena ho incluso il file js bootstrap, tutto ha funzionato.

— Elitmiar
fonte
0

Semplice Prova a creare una funzione in javascript per la classe di compressione a discesa.

Esempio:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

    $timeout(function(){
        $scope.preLoader = false;
        $(document).ready(function() {
            $("#dropdown-element").toggleClass('show');
        });
    },100);

};

Aggancia questa funzione a onClicklavori semplici per me.

— yasir_mughal
fonte
0

Ho avuto il problema simile ma il mio non rimaneva aperto, si apriva / si chiudeva rapidamente, ho scoperto che avevo jquery-1.11.1.min.js caricato prima di bootstrap.min.js. Quindi ho invertito l'ordine di quei 2 file e ho corretto il mio menu. Funziona perfettamente ora. Spero che sia d'aiuto

— Vasko
fonte
0

Il problema potrebbe essere che stai usando versioni obsolete di bootstrap o jquery, OPPURE stai chiamando più di una versione nel tuo markup.

Conserva solo le versioni più recenti, ti serve solo un riferimento. Risolve il problema.

— tacca
fonte
0

potresti semplicemente assicurarti di caricare il tuo jQuery e Bootstrap.min.js ATF. La tua navigazione è la prima cosa da visualizzare nella pagina, quindi se hai i tuoi script nella parte inferiore del tuo HTML, stai perdendo qualsiasi funzionalità JavaScript.

— Chris Johnson
fonte
0

Ho avuto lo stesso problema solo su dispositivo mobile ma per un'applicazione Angular e questo è quello che ho fatto:

app.component.html

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="col-md-12">
      <div class="navbar-header page-scroll">
      <button id ="navButton" style="color:red"type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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" routerLink="/"><img id="navbrand" class="site-logo"  src="assets/img/yayaka_logo.png"/></a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <li class="dropdown" appDropdown>
          <a class="dropdown-toggle" style="cursor: pointer;">
            ΤΙ ΕΙΝΑΙ ΤΟ yayaka<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a (click) = "closeMenu()" href="/#about">About</a></li>
            <li><a (click) = "closeMenu()" href="/#services">Services</a></li>
          </ul>
        </li>
        <li class="page-scroll">
          <a (click) = "closeMenu()" routerLink="/profiles"><strong>Profiles</strong></a>
        </li>
      </ul>
    </div>
  </div>
  </div>
</nav>

app.component.ts 

 closeMenu() {
    var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
    if (isMobile) {
      document.getElementById('navButton').click();
    }
  }

Spero che sia d'aiuto :)

— Stathoula
fonte
-2

Il mio menu non è uno standard della barra di navigazione, ma sono riuscito a comprimere automaticamente il mio, utilizzando una funzione "onclick" e un ".click ()".

<div class="main-header">
    <div class="container">
        <div id="menu-wrapper">
            <div class="row">

                <div class="logo-wrapper col-lg-4 col-md-6 col-sm-7 hidden-xs">

                </div> <!-- /.logo-wrapper -->

                <div class="logo-wrapper2 visible-xs col-xs-9">

                </div> <!-- /.smaller logo-wrapper -->

                <div class="col-lg-8 col-md-6 col-sm-5 col-xs-3 main-menu text-center">
                    <ul class="menu-first hidden-md hidden-sm hidden-xs">
                        <li class="active"><a href="#">item1</a></li> |
                        <li><a href="#our-team">item2</a></li> |
                        <li><a href="#services">item3</a></li> |
                        <li><a href="#elia">item4</a></li> |
                        <li><a href="#portfolio">item5</a></li> |
                        <li><a href="#contact">item6</a></li>
                    </ul>
                    <a href="#" class="toggle-menu visible-md visible-sm visible-xs"><i class="fa fa-bars"></i></a>
                </div> <!-- /.main-menu -->
            </div> <!-- /.row -->
        </div> <!-- /#menu-wrapper -->
        <div class="menu-responsive hidden-lg">
            <ul>
                <li class="active" onclick = $(".toggle-menu").click();><a href="#">item1</a></li>
                <li><a href="#our-team" onclick = $(".toggle-menu").click();>item2</a></li>
                <li><a href="#services" onclick = $(".toggle-menu").click();>item3</a></li>
                <li><a href="#elia" onclick = $(".toggle-menu").click();>item4</a></li>
                <li><a href="#portfolio" onclick = $(".toggle-menu").click();>item5</a></li>
                <li><a href="#contact" onclick = $(".toggle-menu").click();>item6</a></li>
            </ul>
        </div> <!-- /.menu-responsive -->
    </div> <!-- /.container -->
</div> <!-- /.main-header
— Bravo Stefane
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.