Pregunta Bootstrap cierra el menú sensible "al hacer clic"


En "PRODUCTOS", haga clic en Deslice un div blanco (como se ve en el adjunto). Cuando respondo (móvil y tableta), me gustaría cerrar automáticamente la barra de navegación sensible y mostrar solo la barra blanca.

Lo intenté:

$('.btn-navbar').click();  

también intenté:

$('.nav-collapse').toggle();

Y funciona Sin embargo, en el tamaño de escritorio, también se llama y hace algo funky para el menú donde se contrae por un segundo.

¿Algunas ideas?

enter image description here


74
2018-01-07 20:10


origen


Respuestas:


¡Lo tengo que trabajar con animación!

Menú en html:

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

Evento de clic vinculante en todos los elementos del menú de navegación para contraer (complemento de colapso de Bootstrap):

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

EDITAR Para hacerlo más genérico, podemos usar el siguiente fragmento de código

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

83
2018-06-26 10:09



No tiene que agregar ningún javascript adicional a lo que ya está incluido con la opción de colapsar bootstraps. En su lugar, simplemente incluya los selectores de datos y de destino de datos en los elementos de la lista del menú tal como lo hace con el botón de alternar de la barra de navegación. Por lo tanto, para su elemento de menú Productos se vería así

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

Luego, necesitaría repetir los selectores de datos y de destino de datos para cada elemento del menú

¡¡¡EDITAR!!! Con el fin de solucionar los problemas de desbordamiento y el parpadeo de esta solución, agrego un código más que solucionará esto y aún no tendrá javascript adicional. Aquí está el nuevo código:

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Aquí está en el trabajo http://jsfiddle.net/jaketaylor/84mqazgq/

Esto hará que los selectores de alternar y de destino sean específicos del tamaño de la pantalla y eliminen las fallas en el menú más grande. Si alguien todavía tiene problemas con fallas, por favor avíseme y encontraré una solución. Gracias


121
2018-02-13 02:29



Creo que ya dominas la ingeniería ...

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

EDITAR: para ocuparse de los submenús, asegúrese de que su anclaje de alternancia tenga la clase desplegable-alternar.

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

EDIT 2: agregue soporte para el toque del teléfono.

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

37
2018-04-19 14:59



Realmente me gustó la idea de Jake Taylor de hacerlo sin JavaScript adicional y aprovechando el alternar de colapso de Bootstrap. Descubrí que puedes solucionar el problema de "parpadeo" presente cuando el menú no está en modo colapsado modificando el data-target selector ligeramente para incluir el in clase. Entonces se ve así:

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

No lo probé con menús desplegables anidados, así que YMMV.


33
2017-09-20 23:36



Esto funciona, pero no anima.

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

4
2018-01-07 22:27



Supongo que tienes una línea como esta que define el área de navegación, basada en ejemplos de Bootstrap y todo

<div class="nav-collapse collapse" >

Simplemente agregue las propiedades como tales, como en el botón MENÚ

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

He añadido a <body> también, funcionó No puedo decir que lo haya perfilado ni nada, pero parece un placer para mí ... hasta que hace clic en un lugar al azar de la interfaz de usuario para abrir el menú, por lo que no es tan bueno.

DK


4
2018-06-21 19:37



solo para completar, en Bootstrap 4.0.0-beta usando .espectáculo trabajó para mi...

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

4
2017-08-22 13:15



En el HTML agregué una clase de nav-link al un etiqueta de cada enlace de navegación.

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);

3
2018-04-20 18:12