doesn close bootstrap after jquery html twitter-bootstrap

jquery - close - Ocultar Twitter Bootstrap nav colapso al hacer clic



navbar bootstrap doesn t collapse (29)

100% de trabajo: -

Añadir en HTML

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

Javascript

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

Esto no es un menú desplegable de submenú, la categoría es 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 del navegador automáticamente al hacer clic. También camine para usar como navegación, ya que la plantilla tiene solo 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 -->

Aún más elegante sin lamer el código duplicado, es simplemente aplicar los atributos data-toggle="collapse" y data-target=".nav-collapse" al nav mismo:

<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 clean, no requiere JavaScript. Funciona muy bien, siempre y cuando los elementos de tu nav a tengan suficiente relleno para los dedos gordos, y no e.stopPropagation() burbujeo de eventos de clic a través de e.stopPropagation() cuando los usuarios hacen clic en los elementos de nav a .

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

Agrega una identificación luego 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>

Agregar el data-toggle = "colapso" 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 etiquetas <a> donde están los enlaces del menú, agregué este código:

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

Conserva la animación de diapositivas. 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>

Bootstrap establece una clase .in en el elemento Collapse para activar la animación, para abrirla. Si simplemente elimina la clase .in , la animación no se ejecuta, pero ocultará el elemento, no exactamente lo que desea.

Probablemente sea más rápido ejecutar una sentencia if para verificar si la clase de arranque predeterminada .in se ha establecido en el elemento.

Entonces este código solo dice:

si mi elemento tiene aplicada la clase .in , .in activando la animación predeterminada de Bootstrap. De lo contrario, ejecute la acción / animación Bootstrap predeterminada de 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''); } })

Creo que es mejor usar los métodos de .navbar-collapse predeterminados de Bootstrap 3 usando .navbar-collapse como el elemento colapsable que desea 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, si bien algunas soluciones pueden parecer para solucionar su problema inicial, es muy posible que introduzca otras, así que asegúrese de realizar pruebas exhaustivas de su sitio después de cualquier reparación.

Para ver este código en acción:

  1. Presiona "Ejecutar este fragmento de código" a continuación.
  2. Presione el botón "Página completa".
  3. Escala la ventana hasta que se abra la lista desplegable.
  4. Luego selecciona una opción de menú y ¡voila!

¡Aclamaciones!

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

El menú marcado se abrió al marcar la clase ''in'' y luego ejecutar el código.

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

funciona perfectamente.

En cada enlace desplegable, ponga 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 y tiene un menú desplegable como 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 flickr creé una consulta de medios e inserté el desbordamiento oculto a la clase contraída.

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

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

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

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 está animado.

Estoy en Bootstrap 4, usando fullPage.js con un navegador fijo superior, y probé todo lo que se muestra 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 ningún lado.

  • Intenté 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 en los que se hizo clic terminarían no siendo los que hice clic, rompiendo los enlaces. Además, agregaría la clase .show a otras listas desplegables no relacionadas en mi navegador, causando algunas cosas más extrañas.

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

Nada funcionaría.

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 de cambio, si solo tenía que agregar esta línea.

En realidad, hace exactamente lo que yo quiero: colapsar el menú cuando el hash cambia (es decir, se produce un clic en otro lugar). Lo cual es bueno, porque ahora puedo tener enlaces en mi menú que no colapsarán.

Quién sabe, tal vez esto ayude a alguien en mi situación!

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

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

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

Los usuarios de Bootstrap3 prueban el siguiente código. Funcionó para mí

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

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

Para aquellos que han notado que las barras de navegación de 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 colapsará la barra de navegación al hacer clic cuando la barra de navegación está en modo móvil, pero dejará solo 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, de modo 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, entonces el enlace tenía la intención de abrir un menú desplegable y, por consiguiente, el menú no está oculto. Cuando hace clic en un enlace dentro del menú desplegable, la barra de navegación se ocultará correctamente.

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

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

El problema es que no puedes simplemente agregar data-toggle="collapse" y data-target="#navbar" a tus 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 atributo data-toggle="collapse" 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); } } } }

Simplemente btn-navbar los 2 atributos de btn-navbar ( data-toggle="collapse" data-target=".nav-collapse.in" ) en cada enlace como este:

<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 , ha cambiado para show modo que la sintaxis sería:

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

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

El problema que estaba experimentando con cualquiera de las soluciones anteriores era que están colapsando solo los elementos del submenú, mientras que el menú de navegación no 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 contemporáneamente, contraer el menú para restaurar la vista de 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 colaboradores anteriores)

así (lo mismo debería agregarse a los dos rollos)

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

prueba esto:

$(''.nav a'').on(''click'', function(){ $(''.btn-navbar'').click(); //bootstrap 2.x $(''.navbar-toggle'').click() //bootstrap 3.x by Richard });

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

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

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

// NOTA Agregué el "touchstart" para touch móvil. touchstart / end no tiene retraso

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