En "PRODUCTOS", haga clic en y deslizo hacia arriba un div blanco (como se ve en el adjunto). Cuando esté en respuesta (móvil y tableta), me gustaría cerrar automáticamente la barra de navegación de respuesta y solo mostrar la barra blanca.
Lo intenté:
$('.btn-navbar').click();
también probé:
$('.nav-collapse').toggle();
Y funciona. Sin embargo, en el tamaño del escritorio, también se llama y hace algo raro en el menú, donde se encoge por un segundo.
¿Algunas ideas?
Respuestas:
¡Lo tengo para 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>
Enlace de evento de clic en todos los elementos de la navegación para contraer el menú (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');
});
});
aelementos: solo necesitas llamar$("#nav-main").collapse('hide');
No tiene que agregar ningún javascript adicional a lo que ya está incluido con la opción de colapso de bootstraps. En su lugar, simplemente incluya selectores de alternancia de datos y de destino de datos en los elementos de la lista del menú tal como lo hace con el botón de alternancia de la barra de navegación. Entonces, para el elemento del 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 cambio de datos y de destino de datos para cada elemento del menú
¡¡¡EDITAR!!! Para solucionar problemas de desbordamiento y parpadeo en esta solución, estoy agregando más código que solucionará esto y aún no tengo ningún 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 sus selectores de alternancia y de destino sean específicos para el tamaño de la pantalla y eliminará las fallas en el menú más grande. Si alguien todavía tiene problemas con las fallas, hágamelo saber y encontraré una solución. Gracias
EDITAR : En el bootstrap v4.1.3 no pude usar clases visibles / ocultas. En lugar de hidden-xsusar d-none d-sm-blocky en lugar de visible-xsusar d-block d-sm-none.
data-toggley data-targeta cada elemento li, puede agregarlo al padre ulo divetiquetas.
Creo que estás en 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 ancla de alternancia tenga la clase de alternancia desplegable.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
EDITAR 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();
});
});
Realmente me gustó la idea de Jake Taylor de hacerlo sin JavaScript adicional y aprovechar la palanca de colapso de Bootstrap. Descubrí que puede solucionar el problema de "parpadeo" presente cuando el menú no está en modo contraído modificando data-targetligeramente el selector para incluir la inclase. 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 / menús anidados, por lo que YMMV.
solo para estar completo, en Bootstrap 4.0.0-beta usando .show funcionó para mí ...
<li>
<a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
Supongo que tiene 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">
Yo también he añadido <body>, trabajado. No puedo decir que lo he perfilado ni nada, pero me parece un placer ... hasta que haces clic en un lugar aleatorio de la interfaz de usuario para abrir el menú, así que no es tan bueno.
DK
Esto funciona, pero no anima.
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
En el código HTML añadí una clase de nav-enlace a la una etiqueta de cada enlace de navegación.
$('.nav-link').click(
function () {
$('.navbar-collapse').removeClass('in');
}
);
esta solución tiene un buen trabajo, en escritorio y móvil.
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
Solo para deletrear la solución de user1040259, agregue este código a su $ (document) .ready (function () {});
$('.nav').click( function() {
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
});
Como mencionan, esto no anima el movimiento ... pero cierra la barra de navegación en la selección de elementos
Para aquellos que usan AngularJS y Angular UI Router con esto, aquí está mi solución (usando la palanca de mollwe). Donde ".navbar-main-collapse" es mi "destino de datos".
Crear directiva:
module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
return {
restrict: 'C',
link: function (scope, element) {
//watch for state/route change (Angular UI Router specific)
$rootScope.$on('$stateChangeSuccess', function () {
if (!element.hasClass('collapse')) {
element.collapse('hide');
}
});
}
};
}]);
Directiva de uso:
<div class="collapse navbar-collapse navbar-main-collapse">
<your menu>
Esto debería funcionar.
Requiere bootstrap.js.
Ejemplo => http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() {
$('#nav-main').collapse('hide');
});
Esto hace lo mismo que agregar los atributos 'data-toggle = "collapse"' y 'href = "yournavigationID"' a las etiquetas de los menús de navegación.
Estoy usando la función mollwe, aunque agregué 2 mejoras:
a) Evite el cierre del menú desplegable si el enlace en el que se hizo clic está contraído (incluidos otros enlaces)
b) Oculte el menú desplegable también, si está haciendo clic en el contenido web visible.
jQuery.fn.exists = function() {
return this.length > 0;
}
$(function() {
var navMain = $(".navbar-collapse");
navMain.on("click", "a", null, function() {
if ($(this).attr("href") !== "#") {
navMain.collapse('hide');
}
});
$("#content").bind("click", function() {
if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
navMain.collapse('hide');
}
});
});
No es el hilo más nuevo, pero busqué una solución para el mismo problema y encontré una (una combinación de algunos otros).
Le di al NavButton:
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
un id / identificador como:
<button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
No es la mejor "Idea", pero: ¡funciona para mí! Ahora puede verificar la visibilidad de su botón (con jquery) como:
var target = $('#navcop');
if(target.is(":visible")){
$('#navcop').click();
}
(NOTA: ¡Esto es solo un código recortado! ¡Usé un evento "onclick" en mis enlaces de navegación! (Iniciando un AJAX Reguest).
El resultado es: si el botón es "visible", se hizo "clic" ... Entonces: no hay error si usa la "vista de pantalla completa" de Bootstrap (ancho de más de 940px).
Saludos Ralph
PD: Funciona bien con IE9, IE10 y Firefox 25. No revisé otros, pero no puedo ver un problema :-)
Esto funcionó para mí. He hecho como, cuando hago clic en el botón de menú, estoy agregando o quitando la clase 'en' porque al agregar o eliminar esa clase, el interruptor funciona de forma predeterminada. 'e.stopPropagation ()' es para detener la animación predeterminada por bootstrap (supongo) también puede usar el 'toggleClass' en lugar de agregar o quitar la clase.
$ ('# ChangeToggle'). On ('clic', función (e) {
if ($('.navbar-collapse').hasClass('in')) {
$('.navbar-collapse').removeClass('in');
e.stopPropagation();
} else {
$('.navbar-collapse').addClass('in');
$('.navbar-collapse').collapse();
}
});
Si, por ejemplo, su icono de alternancia es visible solo para dispositivos extra pequeños, puede hacer algo como esto:
$('[data-toggle="offcanvas"]').click(function () {
$('#side-menu').toggleClass('hidden-xs');
});
Al hacer clic en [data-toggle = "offcanvas"] se agregará el .hidden-xs de bootstrap a mi # menú lateral, lo que ocultará el contenido del menú lateral, pero volverá a ser visible si aumenta el tamaño de la ventana.
si el html del menú es
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
on nav toggle 'en' la clase se agrega y se quita del toggle. compruebe si el menú de respuesta está abierto y luego realice el cambio de cierre.
$('.nav-collapse .nav a').on('click', function(){
if ( $( '.nav-collapse' ).hasClass('in') ) {
$('.navbar-toggle').click();
}
});
Tuggle Nav Close, respuesta compatible con el navegador IE, sin ningún error de consola. Si está usando bootstrap, use este
$('.nav li a').on('click', function () {
if ($("#navbar").hasClass("in")) {
$('.navbar-collapse.in').show();
}
else {
$('.navbar-collapse.in').hide();
}
})
$('.navbar-toggle').trigger('click');
Solución Bootstrap 4 sin ningún Javascript
Agregar atributos data-toggle="collapse" data-target="#navbarSupportedContent.show" al div<div class="collapse navbar-collapse">
Asegúrese de proporcionar la correcta idendata-target
<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
.showes evitar que el menú parpadee en resoluciones grandes
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>