Ocultar colapso de navegación de Bootstrap de Twitter al hacer clic

Este no es un menú desplegable de submenú, la categoría es de clase li como en la imagen:

Al seleccionar una categoría del menú receptivo (la plantilla es solo una página), quiero ocultar el colapso de navegación automáticamente al hacer clic. También pasee para usar como navegación, ya que la plantilla solo tiene una página. Busco una solución que no lo afecte, aquí está el código HTML del menú:

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

prueba esto:

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

Acabo de replicar los 2 atributos de btn-navbar( data-toggle="collapse" data-target=".nav-collapse.in") 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.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>

En la barra de navegación de Bootstrap 4 , inha cambiado a, showpor lo que la sintaxis sería:

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

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

Es mejor utilizar los métodos predeterminados collapse.js ( documentos V3 , documentos V4 ):

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

Aún más elegante sin una sola capa de código duplicado, es simplemente aplicar los atributos data-toggle="collapse"y data-target=".nav-collapse"al navegador en sí:

<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 limpio, no requiere JavaScript. Funciona muy bien, siempre y cuando tus nav aelementos tengan suficiente relleno para dedos gordos, y no evites que se produzca un evento de clic e.stopPropagation()cuando los usuarios hacen clic en los nav aelementos.

Actualiza tu

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

a

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

Este simple cambio funcionó para mí.

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

La navegación debe cerrarse cada vez que un usuario hace clic en cualquier parte del cuerpo, no solo en los elementos de navegación. Dicho menú está abierto, pero el usuario hace clic en el cuerpo de la página. El usuario espera ver cerrar el menú.

También debe asegurarse de que el botón de alternar esté visible; de ​​lo contrario, se verá un salto en el menú.

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

});

Probado en Bootstrap 3.3.6 - ¡trabajo!

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

Prueba esto> Bootstrap 3

Brillante exactamente lo que estaba buscando, sin embargo, tuve algunos conflictos con el Javascript y el modal de arranque, esto lo solucionó.

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

Espero que esto ayude.

Esto funcionó bien para mí. Es lo mismo que la respuesta aceptada, pero soluciona el problema relacionado con la vista de escritorio / tableta

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

Creo que es mejor usar Bootstrap 3 por defecto métodos collapse.js de usando el .navbar-collapseelemento plegable que deseas ocultar como se muestra a continuación.

Otras soluciones pueden causar otros problemas no deseados con la forma en que los elementos se muestran o funcionan en su página web. Por lo tanto, aunque algunas soluciones pueden parecer solucionar su problema inicial, es muy posible que presente otras, así que asegúrese de realizar pruebas exhaustivas de su sitio después de cualquier corrección.

Para ver este código en acción:

1. Presione "Ejecutar este fragmento de código" a continuación.
2. Presione el botón "Página completa".
3. Escale la ventana hasta que se active el menú desplegable.
4. Luego seleccione una opción de menú y listo!

¡Salud!

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

En cada enlace desplegable, coloque data-toggle = "collapse" y data-target = ". Nav-collapse" donde nav-collapse es el nombre que le da a la lista desplegable.

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

Esto funciona perfectamente en la pantalla que tiene un menú desplegable como las pantallas móviles, pero en el escritorio y la tableta crea un flickr. Esto se debe a que se aplica la clase .collapsing. Para eliminar el flickr, creé una consulta de medios e inserté un desbordamiento oculto para la clase colapsada.

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

Agregar el data-toggle = "collapse" data-target = ". Navbar-collapse.in" a la etiqueta <a>funcionó para mí.

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

Así es como lo hice. Si hay una manera más suave, por favor dígame.

Dentro de las <a>etiquetas donde están los enlaces para el menú, agregué este código:

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

Conserva la animación de la diapositiva. Entonces, en pleno uso, se vería así:

<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 agregué el "touchstart" para dispositivos móviles. TouchStart / End no tiene retraso

Esta es la mejor solución que he usado.

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

    });

Para aquellos que han notado que las barras de navegación del escritorio parpadean al usar esta solución:

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

Una solución simple a ese problema es hacer referencia a la barra de navegación contraída solo verificando la presencia de 'in':

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

Esto colapsa la barra de navegación al hacer clic cuando la barra de navegación está en modo móvil, pero dejará sola la versión de escritorio. Esto evita el parpadeo que muchas personas han presenciado en las versiones de escritorio.

Además, si tiene una barra de navegación con menús desplegables , no podrá verlos, ya que la barra de navegación se ocultará tan pronto como haga clic en ellos, así que si tiene menús desplegables (¡como yo!), Use lo siguiente:

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

Esto busca la presencia de la clase desplegable sobre el enlace en el que se hizo clic en el DOM; si existe, el enlace tenía la intención de iniciar un menú desplegable y, en consecuencia, el menú no está oculto. Cuando hace clic en un enlace dentro del menú desplegable, la barra de navegación se ocultará correctamente.

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

Agregar en HTML

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

Javascript

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

Esto oculta el colapso de navegación en lugar de animarlo, pero el mismo concepto que la respuesta anterior

JS:

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

HTML:

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

Prefiero esto en sitios de una sola página porque uso localScroll.js que ya anima.

Vista móvil: cómo ocultar la navegación de alternancia en bootstrap + menú desplegable + jquery + scrollto con elementos de navegación que apuntan a anclas / identificadores en la misma página , una plantilla de página

El problema que estaba experimentando con cualquiera de las soluciones anteriores era que colapsan solo los elementos del submenú, mientras que el menú de navegación no se colapsa.

Entonces hice mi pensamiento ... y ¿qué podemos observar? Bueno, cada vez que nosotros / los usuarios hacemos clic en un enlace de desplazamiento a, queremos que la página se desplace a esa posición y, al mismo tiempo, colapse el menú para restaurar la vista de la página.

Bueno ... ¿por qué no asignar este trabajo a las funciones scrollto? Fácil :-)

Entonces en los dos códigos

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

y

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

Acabo de agregar el mismo comando en ambas funciones

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

(Felicitaciones a uno de los contribuyentes anteriores)

así (lo mismo se debe agregar a los dos pergaminos)

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

si quieres verlo en acción solo échale un vistazo recupero dati da NAS

Los usuarios de Bootstrap3 prueban el siguiente código. A mí me funcionó.

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 establece una .inclase en el elemento Contraer para activar la animación, para abrirla. Si simplemente elimina la .inclase, la animación no se ejecuta, pero ocultará el elemento, no exactamente lo que desea.

Probablemente más rápido ejecutar una ifinstrucción para verificar si la clase de rutina de arranque predeterminada .inse ha establecido en el elemento.

Entonces este código solo dice:

Si mi elemento tiene la clase .inaplicada, ciérrela activando la animación Bootstrap predeterminada. De lo contrario, ejecute la acción / animación de Bootstrap predeterminada para abrirlo

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

Agregue una identificación a cada

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

Otra solución rápida para Bootstrap 3. * podría ser:

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

Publiqué una solución que funciona con Aurelia aquí: https://stackoverflow.com/a/41465905/6466378

El problema es que no puedes simplemente agregar data-toggle="collapse"ydata-target="#navbar" a sus elementos a. Y jQuery no funciona 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);
      }
    }
  }
}

Estoy en Bootstrap 4, usando fullPage.js con un navegador superior fijo, y probé todo lo que se enumera aquí, con resultados mixtos.

• Intenté la mejor manera limpia:

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

  El menú colapsaría, pero los enlaces href no llevarían a ninguna parte.

• Probé las otras formas lógicas:

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

  Habría un comportamiento extraño debido al evento de inicio táctil: los botones cliqueados terminarían no siendo los que realmente hice clic, por lo tanto, rompiendo los enlaces. Además, agregaría la clase .show a otras listas desplegables no relacionadas en mi navegador, lo que provocaría algunas cosas más extrañas.

• Intenté cambiar div a li
• Intenté con e.preventDefault () y e.stopPropagation ()
• Intenté e intenté más

Nada funcionaria.

Entonces, en cambio, tuve la (hasta ahora) maravillosa idea de hacer eso:

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

Ya tenía cosas en esa función hashchange, solo tenía que agregar esta línea.

Realmente hace exactamente lo que quiero: contraer el menú cuando cambia el hash (es decir, se ha producido un clic que lleva a otro lugar). Lo cual es bueno, porque ahora puedo tener enlaces en mi menú que no lo colapsarán.

Quién sabe, ¡quizás esto ayude a alguien en mi situación!

Y gracias a todos los que han participado en ese hilo, mucha información para aprender aquí.

En la mayoría de los casos, solo querrá llamar a la función de alternar si el botón de alternar está visible ...

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

Me registré en el menú se abre marcando 'en' la clase y luego ejecuto el código.

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

funciona perfectamente.