html - top - El menú contraído de Bootstrap 3 no se cierra al hacer clic
navbar-fixed-top bootstrap 4 (23)
Asegúrese de utilizar la última versión de bootstrap js. Estaba enfrentando el mismo problema y simplemente actualizar el archivo bootstrap.js de bootstrap-3.3.6 hizo la magia.
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 del menú se expande el menú, pero si hago clic (o toque para ese asunto) en un enlace de menú, el menú permanece abierto. ¿Qué tengo que hacer para cerrarlo de nuevo?
Aunque la solución publicada anteriormente para cambiar el elemento del menú, como a continuación, funciona cuando el menú está en un dispositivo pequeño, tiene un efecto secundario cuando el menú está en todo el ancho y expandido, esto puede dar como resultado una barra deslizadora horizontal deslizándose sobre su elementos del menú . Las soluciones 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>
(Lo siento por responder de esta manera, quería agregar un comentario a esa respuesta, pero parece que no tengo suficiente crédito para hacer comentarios)
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í.
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 colapsar y hamburguesa. Aquí está mi versión en jsfiddle: jsfiddle Scrollspy navbar . Solo obtenía funcionalidad básica usando las instrucciones en getbootsrap.com. Para mí, el problema estaba principalmente en las direcciones vagas y js recomendadas por el sitio getbootstrap. La mejor parte fue que agregar este bit adicional de js (que incluye algo de lo que se menciona en los hilos anteriores) resolvió varios problemas de Scrollspy para mí, incluyendo:
- El menú de navegación colapsado / contraído se oculta cuando se hace clic en la "sección" de navegación (p. Ej., Href = "# foobar") (cuestión relacionada con este hilo).
- La "sección" activa se destacó con éxito (es decir, js creó con éxito class = "active")
- Se eliminó la molesta barra de desplazamiento vertical encontrada en el navegador colapsado (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 como ...
<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">
Por supuesto, puede cambiar ese valor a cualquier valor que desee.
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 conserva las últimas versiones, solo necesitas la referencia. Resuelve el problema.
En caso de que desee anular manualmente este comportamiento llamando a .collapse (''hide'') dentro de una directiva de 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>
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(); }
});})
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''); en el elemento jQuery que quiere colapsar.
Mi menú no es uno de navegación estándar, pero logré colapsar automáticamente el mío, 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
Sé que esta pregunta es para Bootstrap 3, pero si buscas una solución para Bootstrap 4 , solo haz esto:
$(document).on(''click'',''.navbar-collapse.show'',function(e) {
$(this).collapse(''hide'');
});
Si solo quieres que tu navegación se alterne cuando se usa en una pantalla móvil, simplemente agregar data-toggle="collapse" y data-target="#navbar" a tu a elementos funcionará en la pantalla del móvil, pero te dará un aspecto extraño parpadeo cuando se hace 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 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);
}
}
}
}
Simple Intenta 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 onClick trabajos simples para mí.
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 enlaces dinámicamente a su menú y aún así funcionará), y solo se llama si el menú ya está expandido. Algunas personas han informado flashes extraños donde el menú se abre y luego se cierra inmediatamente con otro código que no verifica que el menú tenga la clase "en".
[ACTUALIZACIÓN 2014-11-04] aparentemente cuando se utilizan 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'');
}
});
Tenía el problema similar pero el mío no se mantendría 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 revertí el orden de esos 2 archivos y arreglé mi menú. Corre impecablemente ahora. Espero eso ayude
Tengo / tuve problemas similares con Bootstrap 4, alpha-6, y la respuesta anterior de 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 rodeando 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>
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>
Tuve el mismo problema pero causado al incluir dos archivos bootstrap.js y jquery.js .
Con un solo clic, el evento fue procesado dos veces por ambas instancias de jquery. Uno cerró y otro abrió la palanca.
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ó.
Tuve el mismo problema, estaba usando jQuery-1.7.1 y bootstrap 3.2.0 . Cambié mi versión de jQuery a la última versión ( jquery-1.11.2 ) y todo funciona bien.
es posible que desee asegurarse de que está cargando su ATF jQuery y Bootstrap.min.js. Su navegación es lo primero que debe renderizar en la página, de modo que si tiene los scripts en la parte inferior de su HTML, está perdiendo cualquier funcionalidad de JavaScript.
yo si
$(".navbar-toggle").click(function(event) {
$(".navbar-collapse").toggle(''in'');
});
$(function(){
var navMain = $("#your id");
navMain.on("click", "a", null, function () {
navMain.collapse(''hide'');
});
});
$(".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