Tengo un menú de navegación móvil/sensible que se abre con un botón usando jquery. El botón funcionaba muy bien hasta que agregué una secuencia de comandos jquery para cerrar también la ventana si el usuario hace clic en cualquier lugar fuera del menú div, esa secuencia de comandos también funciona según lo previsto para cerrar el menú en todas partes excepto cuando se intenta usar el botón de menú inicial, que ganó no funciona si trato de cerrar el menú con él (pero aún se puede usar para abrir el menú nuevamente si está cerrado).
¿Alguien puede ayudarme a averiguar por qué el botón en sí no funciona?
$(document).ready(function() { var mobileNav = $('#mobile-nav'); //Toggle hide on the menu $('.btn-navbar').on('click', function(){ mobileNav.toggleClass('d-none'); }); // Hide menu if clicked outside $(document).mouseup(function(e){ if (!mobileNav.is(e.target) && mobileNav.has(e.target).length === 0 && !mobileNav.hasClass('d-none')){ $('#mobile-nav').toggleClass('d-none'); } }); });Dado que el evento mouseup se activa antes del evento click , entonces cuando hace clic en .btn-navbar en realidad primero se ejecuta el controlador relacionado con mouseup , y alterna la clase d-none en mobileNav , luego se ejecuta el controlador relacionado con click, y nuevamente alterna la clase d-none en mobileNav , por lo que su visualización nunca cambia, para resolver el problema, en el controlador mouseup puede verificar si el elemento de destino no es .btn-navbar luego alternar la clase d-none , así:
$(document).mouseup(function(e){ if (!$(e.target).is('.btn-navbar') && !mobileNav.is(e.target) && mobileNav.has(e.target).length === 0 && !mobileNav.hasClass('d-none')){ $('#mobile-nav').toggleClass('d-none'); } });Aquí hay un ejemplo simple:
$(document).ready(function() { var mobileNav = $('#mobile-nav'); //Toggle hide on the menu $('.btn-navbar').on('click', function() { mobileNav.toggleClass('d-none'); }); $(document).mouseup(function(e) { if (!$(e.target).is('.btn-navbar') && !mobileNav.is(e.target) && mobileNav.has(e.target).length === 0 && !mobileNav.hasClass('d-none')) { $('#mobile-nav').toggleClass('d-none'); } }); }); .d-none { display: none } #mobile-nav { background: red } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <button class="btn-navbar">Toggle nav</button> <h1 id="mobile-nav" class="d-none">nav content</h1>No estoy seguro del por qué, pero al botón no le gusta la declaración $ (documento) ... ahora estoy usando la misma función pero usando la identificación del div de contenido principal