¿Cómo puedo editar mi código para que la barra de navegación se cierre cuando se hace clic fuera de ella, pero permanece abierta si se hace clic en algo dentro de ella?
$(document).ready(function() { $('.nav-btn').on('click', function() { $('.nav-btn').removeClass('active'); $(this).parent().find('.sub-menu').slideToggle(); $(this).toggleClass('active'); }); });$(document).on('click', function (event) { if ($(event.target).closest('.main-nav').length === 0) { // Close button code } });$(document).ready(function () { $('.nav-btn').on('click', function (e) { // Stop Document to be clicked when clicked in nav. e.stopPropagation() $('.nav-btn').removeClass('active'); var subMenu = $(this).parent().find('.sub-menu') if (!$(".sub-menu").is(":visible")) { $(this).parent().find('.sub-menu').slideToggle(); } $(this).toggleClass('active'); }); // Toggle Sub Menu and remove active when Any vacant place is clicked $(this).on('click', function (event) { $('.nav-btn').removeClass('active'); $('.nav-btn').parent().find('.sub-menu').slideToggle(); }); // Prevent View close when Sub Items is clicked $('.sub-menu').on('click', function (e) { e.stopPropagation() }) });Hola, solo necesita evitar que el documento haga clic cuando se hace clic en el elemento de navegación y manejar algunas cosas adicionales como se hizo en el código anterior.
Puedes ver el ejemplo de Plunker aquí también.