El menú contraído Bootstrap 3 no se cierra al hacer clic

122

Tengo una navegación más o menos estándar de 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>

Se colapsa normalmente en dispositivos más pequeños. Al hacer clic en el botón de menú se expande el menú, pero si hago clic (o toco) en un enlace de menú, el menú permanece abierto. ¿Qué tengo que hacer para cerrarlo de nuevo?

html  css  twitter-bootstrap  navigation 
— Paranoia
fuente
55
¡la respuesta de user3669917 es sin duda la respuesta más fácil y directa!
— Thomas
1
— Inanc Gumus

Respuestas:

48

La configuración predeterminada de Bootstrap es mantener el menú abierto cuando hace clic en un elemento del menú. Puede anular manualmente este comportamiento llamando a.collapse('hide'); al elemento jQuery que desea contraer.

— VCNinc
fuente
8
Esto está mal, bootstrap alterna automáticamente la clase "colapso". No necesita ningún código jquery adicional. Si tiene ese comportamiento, significa que algo está mal en su código html (por mi parte, incluí dos veces jquery y bootstrap, consulte la respuesta de @raisercostin).
— RomOne
@RomOne Esta respuesta es correcta. Bootstrap no no cerrar el menú después de que se hace clic en los enlaces por defecto. La otra respuesta solo es aplicable si las personas incluyen incorrectamente jQuery dos veces, lo cual no es la respuesta correcta a esta pregunta.
— Zim
136

Solo para compartir esto de las soluciones en GitHub, esta fue la respuesta popular:

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

Esto está conectado al documento, por lo que no tiene que hacerlo en ready () (puede agregar dinámicamente enlaces a su menú y seguirá funcionando), y solo se llama si el menú ya está expandido. Algunas personas han informado de un parpadeo extraño donde se abre el menú y luego se cierra inmediatamente con otro código que no verificó que el menú tuviera la clase "en".

[ACTUALIZACIÓN 2014-11-04] aparentemente cuando se usan submenús, lo anterior puede causar problemas, por lo que lo anterior se modificó a:

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
— Kevin Nelson
fuente
1
Funciona perfectamente. ¡Gracias por compartir!
— Rodrigo Chiong
¿Puedes explicar '$ (this) .collapse (' hide ');' Por favor. no entiendo de dónde viene el "colapso"
— timebandit
@ImranNazir, lo siento, esto es mucho después de la pregunta, pero collapsees un método definido por bootstrap y adjunto al objeto jQuery ... presumiblemente, lo reutilizan para múltiples propósitos (acordeón, barra de navegación, etc.): getbootstrap.com/javascript / # collapse-use
— Kevin Nelson
El código actualizado funcionó para mí, las respuestas anteriores no. ¡Gracias!
— RandomUs1r
El "[ACTUALIZACIÓN 2014-11-04]" funcionó. En cuanto a la otra solución donde se recomienda eliminar la referencia duplicada a bootstrap.js y jquery que no es necesaria la solución. Encontré esta solución para solucionar el problema con menos tiempo para la depuración y con un comportamiento más explícito. ¡Gracias!. Espero que esto te ayude como me ayudó a mí.
— Nour Lababidi
122

Cambia esto: 

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

a esto:

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

Este simple cambio funcionó para mí.

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

— FullStackDev
fuente
14
Esta solución está bien para la vista móvil, pero muestra la animación mostrar / ocultar en pantallas grandes una vez que se hace clic en el enlace.
— Ayman Al-Absi
22
@ AymanAl-Absi Hay que añadir .inal final del data-targetvalor: data-target=".navbar-collapse.in". Del comentario en esta respuesta: stackoverflow.com/a/21797534/89818
— caw
esto funciona muy bien para mí, pero rompe la espiral de desplazamiento, ¿alguna idea de por qué podría ser?
— Craig Harley
1
Me funcionó cuando se actualizó el código anterior con @caw answer. También estoy usando la función scrollspy.
— Niraj
Esta es, con mucho, la mejor solución. Sin javascript, sin jQuery. Si desea que cierto enlace mantenga abierto el menú, simplemente no agregue estos parámetros. Debe señalarse como la mejor respuesta. Gracias.
— ed1nh0
55

Tuve el mismo problema pero causado por incluir dos veces bootstrap.js y jquery.jsarchivos.

Con un solo clic, el evento fue procesado dos veces por ambas instancias jquery. Uno cerró y otro abrió la palanca.

— raisercostin
fuente
3
Tuve exactamente el mismo problema pero no me di cuenta de que estaban siendo incluidos dos veces. ¡Gracias por publicar esto!
— Brian ONeil
2
También lo hizo nuestro interno. Gracias por publicar esto.
— Teisman
2
¡Hombre! Hice lo mismo: ¡creo que he vuelto a ser pasante!
— Dicer
2
Muy útil! Había estado trabajando en esto por días. Esto puede ser muy común cuando se usa una plantilla de barra de navegación. ¡Ten cuidado gente! :)
— Matt Butler
2
Esto debe ser marcado como la mejor respuesta. Tuve el mismo problema al eliminar bootstrap.js resolvió el problema
— katwekibs
17 
$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

Esto ayudaría a manejar el menú desplegable en la barra de navegación

— Chakradhar Vyza
fuente
Esto solucionó mi problema en el que el uso de bootstrap con el javascript de una presentación de diapositivas jssor creaba problemas. Este código también crea un efecto genial al expandir y contraer el menú móvil.
— Adam West
Gracias @ Chakradhar, me ahorró tiempo.
— Omar Bahir el
Gracias, olvidé que Laravel 5.5 JS incluye B y Jquery en el archivo js principal.
— Jack Vial
12

Tengo / tuve problemas similares con Bootstrap 4, alpha-6, y la respuesta anterior de Joakim Johansson me inició en la dirección correcta. No se requiere javascript. Poner data-target = ". Navbar-collapse" y data-toggle = "collapse" en la etiqueta div dentro del navegador, pero que rodea los enlaces / botones, funcionó para mí.

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

— Pablo
fuente
Tu publicación me ayudó mucho. Esto lo resolvió para mí <body data-toggle = "collapse" data-target = ". Navbar-collapse">
— Dessus
Esto ya fue publicado hace 3 años. Además, rompe la animación en la vista no móvil.
— Bevor
6

Sé que esta pregunta es para Bootstrap 3, pero si está buscando una solución para Bootstrap 4 , simplemente haga esto:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
— Syed
fuente
Estoy usando BS4 beta y su código funciona perfectamente. Intenté todas las otras soluciones sugeridas aquí sin suerte. BS4 aparentemente ha cambiado lo suficiente como para que otras soluciones simplemente no se apliquen.
— Bicicleta Dave
Por relevancia y para mantener las cosas concurrentes con información actualizada: esta debería ser la mejor respuesta.
— Ricky
@Ricky OP especificó Bootstrap 3, no 4.
— Malavos
Para los menús con menús desplegables utilicé esto:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
— James Wilkins
5

Tuve el mismo problema, estaba usando jQuery-1.7.1y bootstrap 3.2.0. Cambié mi versión de jQuery a la última jquery-1.11.2versión ( ) y todo funciona bien.

— Densol
fuente
5

yo hice 

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

Aunque la solución publicada anteriormente para cambiar el elemento del menú en sí, como a continuación, funciona cuando el menú está en un dispositivo pequeño, tiene un efecto secundario cuando el menú está en ancho completo y expandido, esto puede resultar en una barra de desplazamiento horizontal deslizándose sobre su elementos de menú . Las soluciones de JavaScript no tienen este efecto secundario.

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

(perdón por responder así, quería agregar un comentario a esa respuesta, pero parece que no tengo suficiente crédito para hacer comentarios)

— Wim Van Houts
fuente
2 
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
— Vale
fuente
compruébalo nueva versión Matthias S :-)
— Chit
@bfontaine Primero, debe agregar la identificación en su div de menú, y cuando hace clic en su menú, luego se oculta todo el menú. Por ejemplo: - Cuando hace clic en el menú sobre nosotros, la pestaña del menú de descanso se ocultará.
— Chit
1
gracias, pero por favor escriba eso en su respuesta;)
— bfontaine
1

En caso de que desee anular manualmente este comportamiento llamando a .collapse ('hide') dentro de una directiva angular, aquí está el código:

archivo 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
fuente
1

Asegúrese de estar utilizando la última versión de bootstrap js. Estaba enfrentando el mismo problema y solo actualizar el archivo bootstrap.js desde bootstrap-3.3.6 hizo la magia.

— Aman Arun
fuente
1

Si solo desea alternar su navegación cuando se usa en una pantalla móvil, simplemente agregue data-toggle="collapse"ydata-target="#navbar" elementos funcionará en la pantalla móvil, pero le dará un parpadeo extraño al hacer clic en una pantalla de escritorio. Las soluciones jQuery no funcionan bien si se encuentra en un entorno Aurelia o Angular.

La mejor solución para mí fue crear un atributo personalizado que escuche la consulta de medios correspondiente y agregue el data-toggle="collapse"atributo si lo desea:

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

El atributo personalizado con Aurelia se ve así:

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

— halllo
fuente
0

Descubrí que después de mucha lucha, prueba y error, la mejor solución para mí en jsfiddle. Enlace a la inspiración en jsfiddle.net . Estoy usando la barra de navegación de bootstrap navbar-fixed-top con colapso y alternar hamburguesa. Aquí está mi versión en jsfiddle: jsfiddle Scrollspy navbar . Solo estaba obteniendo funcionalidad básica usando las instrucciones en getbootsrap.com. Para mí, el problema estaba principalmente en las direcciones vagas y recomendadas por el sitio getbootstrap. La mejor parte fue que agregar este bit extra de js (que incluye algo de lo que se menciona en los hilos anteriores) resolvió varios problemas de Scrollspy para mí, que incluyen:

  1. El menú de navegación contraído / activado se oculta cuando se hace clic en la "sección" de navegación (por ejemplo, href = "# foobar") (problema al abordar este hilo).
  2. La "sección" activa se resaltó correctamente (es decir, js creó con éxito class = "active")
  3. Se eliminó la molesta barra de desplazamiento vertical que se encuentra en la navegación colapsada (solo en pantallas pequeñas).

NOTA: En el código js que se muestra a continuación (desde el segundo enlace jsfiddle en mi publicación):

topMenu = $ ("# myScrollspy"),

... el valor "myScrollspy" debe coincidir con el id = "" en su HTML así ...

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

Por supuesto, puede cambiar ese valor al valor que desee.

— Adam Calihman
fuente
0

Todo lo que necesita es data-target = ". Navbar-collapse" en el botón, nada más.

<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
fuente
+1: También funciona agregando data-toggle = "collapse" data-target = ". Navbar-collapse" a <a /> o en mi caso <Link /> en Meteorjs con React, gracias.
— Joe L.
sí, funciona <a/>pero no funcionó <NavLink/>, se derrumba pero, <NavLink/>ya no funciona, ¿alguna idea de por qué?
— La pirámide
0

Este es el código que funcionó para mí:

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

Tuve el mismo problema, asegúrese de que bootstrap.js esté incluido en su página html. En mi caso, el menú se abrió pero no se cerró. Tan pronto como incluí el archivo bootstrap js, todo funcionó.

— Elitmiar
fuente
0

Simple Intente hacer una función en javascript para la clase de colapso desplegable.

Ejemplo:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

Enganche esta función a onClicktrabajos simples para mí.

— yasir_mughal
fuente
0

Tuve el problema similar pero el mío no se mantuvo abierto, se abriría / cerraría rápidamente, descubrí que tenía jquery-1.11.1.min.js cargando antes de bootstrap.min.js. Así que invertí el orden de esos 2 archivos y arreglé mi menú. Corre perfectamente ahora. Espero eso ayude

— Vasko
fuente
0

El problema podría ser que está utilizando versiones desactualizadas de bootstrap o jquery, O está llamando a más de una versión en su marcado.

Solo guarde las últimas versiones, solo necesita una referencia. Resuelve el problema

— Mella
fuente
0

es posible que desee asegurarse de que está cargando su jQuery y Bootstrap.min.js ATF. Su navegación es lo primero que se representa en la página, por lo que si tiene sus scripts en la parte inferior de su HTML, está perdiendo cualquier funcionalidad de JavaScript.

— Chris Johnson
fuente
0

Tuve el mismo problema solo en dispositivos móviles, pero para una aplicación angular y esto es lo que hice:

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

Espero eso ayude :)

— Stathoula
fuente
-2

Mi menú no es un estándar de la barra de navegación, pero logré colapsar el mío automáticamente, usando una función "onclick" y 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
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.