Tengo un menú y un botón para alternar este menú:
<a id="openMenu" onclick="openMenu()">Menu</a> <div class="menu">..menu stuff..</div> Ahora quiero vincular un evento de clic en todo el <body> , excepto los dos elementos descritos. El evento de clic es que cuando el <menu> está visible y el usuario hace clic en cualquier lugar dentro del <body> el <menu> debe cerrarse nuevamente.
Tengo el siguiente código para esto:
var menuComponents = $(".menu, #openMenu").children(); $("body") .not(menuComponents) .on("mousedown", function (event) { if ($(".menu").attr("active") == "true") { setActive(".menu"); } }); Pero ahora, cuando se abre el menu y hago clic en el botón <a id="openMenu"...> para cerrar el menu nuevamente, se cierra y se vuelve a abrir inmediatamente. Entonces, ¿es posible excluir el menu y el botón openMenu del cuerpo?
¿Hay alguna pista sobre por qué este comportamiento es así?
Agregue el oyente al body , luego, si el elemento en el que se hizo clic ( e.target ) es el enlace .toggle() el menú; de lo contrario, cualquier otro clic cerrará el menú de manera predeterminada.
Por cierto, hay algunas cosas que no debes hacer (especialmente si usas jQuery).
Los controladores de eventos en línea son basura , así que no los use.
#id solo obstaculiza su capacidad para actualizar y expandir su código, así que use clases. Hay algunas ocasiones en las que #id puede ser necesario, pero no con la situación actual.
<a /*id*/="useClassNotID" /*onclick="DoNotUse(this)"*/>Menu</a> $(document).click(function(e) { if ($(e.target).is('.openMenu')) { $('.menu').toggle({ duration: 500 }); } else { $('.menu').hide({ duration: 500 }); } }); <a href='#' class="openMenu">Menu</a> <section class="menu"> <ul> <li><a href='#'>Link</a></li> <li><a href='#'>Link</a></li> <li><a href='#'>Link</a></li> <li><a href='#'>Link</a></li> <li><a href='#'>Link</a></li> </ul> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>