Tengo una barra lateral si hago clic en el botón y luego la barra lateral aparece desde la izquierda, y cuando hago clic en el cuerpo, la barra lateral se oculta, pero ¿por qué sucede solo una vez?
HTML
<body> <div class="site-overlay"></div> <a href="#menu" class="menu-link"> button ☰</a> <nav id="menu" class="panel" role="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">The Ballad of El Goodo</a></li> <li><a href="#">Thirteen</a></li> <li><a href="#">September Gurls</a></li> <li><a href="#">What's Going Ahn</a></li> </ul> </nav> </body>JS:
$(document).ready(function() { $('.menu-link').bigSlide({ easyClose: true }); $('.menu-link').click(function() { $('body').addClass('menu-open'); }); });CSS:
a.menu-link { float: right; padding: 20px } nav#menu { background: lightblue; z-index: 100000000000000 } .site-overlay { display: none; } .menu-open .site-overlay { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9998; -webkit-animation: fade 500ms; animation: fade 500ms; }¿CÓMO PUEDO HACER QUE FUNCIONE MUCHAS VECES, en lugar de una sola vez?
Después del clic, muestra su superposición, pero debido a que tiene un índice z: 9998, la superposición se coloca encima del botón, por lo que cuando intenta hacer clic en el botón, en realidad está haciendo clic en la superposición, no en el botón.
Debe crear un evento cuando se haga clic en la superposición para eliminar esa clase, como este:
$('.site-overlay').click(function() { $('body').removeClass('menu-open') })Esto se debe a que la clase agregada no se elimina.
Puede controlarlo agregando un valor de alternancia para ese botón.
En lugar de addClass, ponga toggle.
En el camino que pongas, agregarás "menú-abrir" una vez y nunca se eliminará.
tienes más información sobre esto aquí: https://www.w3schools.com/howto/howto_js_toggle_class.asp