twitter-bootstrap - transparente - menu de opciones bootstrap

Cerrar la barra de navegación de respuesta automáticamente

Question

Estoy usando una barra de navegación sensible Bootstrap. Cuando la barra de navegación está contraída, abro el menú y hago clic en un elemento del menú, el menú no se cierra automáticamente y tengo que hacerlo yo mismo manualmente.

¿Es posible hacer que el menú se cierre automáticamente después de hacer clic en uno de los botones?

Answer 1

Acabo de replicar los 2 atributos de btn-navbar (data-toggle = "collapse" data-target = ". Nav-collapse") en cada enlace de esta manera:

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse">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>
  </ul>
</div>

Answer 2

Completo las respuestas agregando la gestión de clic de botón:

$(document).on(''click'', ''.navbar-collapse.collapse.in a:not(.dropdown-toggle)'', function() {
    $(this).closest(".navbar-collapse").collapse(''hide'');
});
$(document).on(''click'', ''.navbar-collapse.collapse.in button:not(.navbar-toggle)'', function() {
    $(this).closest(".navbar-collapse").collapse(''hide'');
});

Answer 3

La solución desplegable de @ Mike funcionó para mí, excepto que los elementos dentro de la opción desplegable no ocultaban el menú, así que me aseguré de agregar esto:

$(''.navbar-collapse .dropdown-menu'').click(function(){
    $(".navbar-collapse").collapse(''hide'');
});

Answer 4

Lo único que agregaría a la solución de jason es la excepción para los menús desplegables. No desea cerrar el menú si alguien simplemente está haciendo clic para alternar el submenú. Asi que…

$(''.navbar-collapse a:not(.dropdown-toggle)'').click(function(){
    $(".navbar-collapse").collapse(''hide'');
});

Answer 5

Mi problema era que estaba creando un diseño de página única con anclajes. Por lo tanto, cuando reduzca el tamaño de la ventana, el menú ocultar al hacer clic en el enlace perfectamente. Gracias al usuario anterior que me dio la pista. Pero, cuando la ventana de tamaño grande, el evento de vinculación siempre está allí (sin recargar, sin embargo). Entonces, aquí está lo que hice. Espero que ayude a alguien :)

jQuery.noConflict();
(function($){
    $(''ul#menu-menu-with-anchors li a, a[href="#top"]'').click(function(){
        $(''html, body'').animate({
            scrollTop: $( $.attr(this, ''href'') ).offset().top - ($(''body'').hasClass(''admin-bar'') ? 160 : 130)
        }, 500);
        return false;
    });

    bindUnbindNavToggle($);
    $(window).resize(function(){
        bindUnbindNavToggle($);
    });

})(jQuery);

function bindUnbindNavToggle($){
    if( $(''button.navbar-toggle'').css(''display'') != ''none'' ) {
        $(''.navbar-collapse ul li a'').on(''click'', function(){
           $(''.navbar-collapse'').collapse(''hide'');
            return false;
        });
    }
    else {
        $(''.navbar-collapse ul li a'').on(''click'', function(){
            return false;
        });
    }
}

Answer 6

Otro problema es que cuando ves la barra de navegación en el escritorio, intenta ocultar / mostrar la barra de navegación, así que hice esto:

$(''.navbar-collapse a:not(.dropdown-toggle)'').click(function(){
    if($(window).width() < 768 )
        $(''.navbar-collapse'').collapse(''hide'');
});

Answer 7

Si usa Angular, puede enlazar el colapso a la navegación de la ruta:

$scope.$on(''$routeChangeSuccess'', function(event, toState, toParams, fromState, fromParams){ $(".navbar-collapse").collapse(''hide''); });

Answer 8

Simplemente ponga este código en main.js

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

Answer 9

Solo recuerde recorrer el árbol DOM y cerrar la barra de navegación asociada, y no todas las barras de navegación. En particular para Bootstrap 3, use algo similar al siguiente fragmento de código:

$("body").on("click", ".navbar-collapse a", function() {
  var $this = $(this);

  setTimeout(function() {
     $this.closest(".navbar-collapse").collapse(''hide'');
  }, 350);
});

Answer 10

Solución de trabajo para bootstrap 3

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

Answer 11

Tal vez alguien deba ocultar el menú cuando haga clic en otro lugar (supongo que no hay submenús). Luego simplemente agrega este código en algún lugar después de jquery, bootstrap.js

$(''button.navbar-toggle'').focusout(function(){
        $(".navbar-collapse").collapse(''hide'');
    });

Answer 12

Edición: como señala Maximus a continuación, la solución de arranque 3.x es:

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

https://jsfiddle.net/yohuLuj2/

Respuesta anterior para bootstrap 2.x :

Debería poder hacer eso agregando un controlador de clic a los elementos de la lista y luego cerrando la navegación de esa manera.

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

Heres a jsfiddle: http://jsfiddle.net/hajpoj/By6ym/4/