Cuando está en la vista móvil, aparece el menú de hamburguesas y el usuario hace clic en el icono que se abre, cuando hace clic en el icono de cerrar. se cierra.
Estoy intentando permitir que los usuarios hagan clic fuera del menú para cerrar el menú. Lamentablemente, el código JS proporcionado anteriormente permite a los usuarios hacer clic en cualquier lugar del sitio para abrir y cerrar el menú. No quiero esto, solo quiero que el menú se cierre cuando un usuario haga clic fuera de él.
¿Cómo puedo conseguir esto? Cualquier ayuda es apreciada.
document.querySelector('#bg-close').addEventListener('click', function() { document.querySelector('.nav').classList.toggle('nav-container') })El problema que estoy tratando de resolver está en mi sitio web
Resumen:
El menú de hamburguesas se activa con un clic en cualquier parte del sitio.
Puedes implementar algo como lo siguiente:
Utiliza una declaración if para ver si la clase .nav-open está activa, en caso de que no esté allí, no pasará nada. En caso contrario será eliminado.
$('#bg-close').on('click', function() { let nav = $('#navElement-id'); if(nav.attr('class') == 'nav-container nav-open'){ nav.attr('class','nav-container'); } }); *{padding:0;margin:0} #bg-close{height:100vh;width:100vw;background-color:blue} .nav-container{color:blue; padding:10px;position:absolute;top:10px; left:0;} .nav-open{color:black!important;background-color:grey;width:300px;height:200px} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="bg-close"> </div> <div id="navElement-id" class="nav-container nav-open">Click on the blue</div>