Algunos usuarios de Stackoverflow han sugerido usar classList.toggle en lugar de las condiciones if y else. Así que estoy tratando de hacer que funcione en mi menú desplegable, pero no entiendo por qué no funciona.
Al hacer clic en los elementos del menú de forma completamente aleatoria, me encuentro con div class="drop_container hide show" , por lo que las clases no se alternan como sucede con las condiciones if y else, pero la clase drop_container adquiere tanto ocultar como mostrar. Hay algo mal ?
Editar : gracias a los comentarios de todos los usuarios me di cuenta de dónde estaba equivocado. Las respuestas que me han dado son todas correctas pero ninguna ha sido la solución para mí. La más cercana a mi problema es la respuesta dada por el usuario @jeremy-denis
Esta es la solución que encontré : originalmente pensé que se necesitaban dos clases para animar el cierre del menú desplegable, al final me di cuenta de que solo una clase es suficiente. Así que agregué transition: max-height 0.3s ease; a la clase drop_container.
De esta manera ya no tengo el problema inicial con classList.toggle.
var dropdownBtn = document.querySelectorAll('.menu-btn'); //Add this for toggling dropdown lastOpened = null; dropdownBtn.forEach(btn => btn.addEventListener('click', function() { var menuContent = this.nextElementSibling; menuContent.classList.toggle("show"); //Add this for toggling dropdown if (lastOpened && lastOpened !== menuContent) lastOpened.classList.remove("show"); lastOpened = menuContent; })); .menu-btn { background: #e0e0e0; padding: 10px; margin: 5px 0px 0px 0px; } .menu-btn:hover { background: #000; color: #fff; } .drop_container { overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out; } .drop_container.show { max-height: 300px; transition: max-height 0.4s ease-in; } .drop_container > .item { display: flex; flex-direction: column; margin-left: 10px; padding: 10px 0px 0px 0px; } <div class="dropdown-menu"> <div class="menu-btn">One</div> <div class="drop_container"> <a class="item" href="#">Contact Us</a> <a class="item" href="#">Visit Us</a> </div> <div class="menu-btn">Two</div> <div class="drop_container"> <a class="item" href="#">Contact Us</a> <a class="item" href="#">Visit Us</a> </div> </div>solo tiene que alternar el espectáculo de clase para poder ocultar y mostrar diferentes elementos
menuContent.classList.toggle("show"); var dropdownBtn = document.querySelectorAll('.menu-btn'); //Add this for toggling dropdown lastOpened = null; dropdownBtn.forEach(btn => btn.addEventListener('click', function() { var menuContent = this.nextElementSibling; menuContent.classList.toggle("show"); //Add this for toggling dropdown if (lastOpened && lastOpened !== menuContent) lastOpened.classList.remove("show"); lastOpened = menuContent; })); .menu-btn { background: #e0e0e0; padding: 10px; margin: 5px 0px 0px 0px; } .menu-btn:hover { background: #000; color: #fff; } .drop_container { overflow: hidden; max-height: 0; } .drop_container.show { max-height: 300px; transition: max-height 0.3s ease; } .drop_container.hide { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; } .drop_container>.item { display: flex; flex-direction: column; margin-left: 10px; padding: 10px 0px 0px 0px; } <div class="dropdown-menu"> <div class="menu-btn">One</div> <div class="drop_container"> <a class="item" href="#">Contact Us</a> <a class="item" href="#">Visit Us</a> </div> <div class="menu-btn">Two</div> <div class="drop_container"> <a class="item" href="#">Contact Us</a> <a class="item" href="#">Visit Us</a> </div> </div>Cambio un poco tu código.
var dropdownBtn = document.querySelectorAll('.menu-btn'); const drop_container = document.querySelectorAll('.drop_container'); //Add this for toggling dropdown lastOpened = null; dropdownBtn.forEach(btn => btn.addEventListener('click', function() { var menuContent = this.nextElementSibling; drop_container.forEach(b => b.classList.remove("show")); menuContent.classList.toggle("show"); })); .menu-btn { background: #e0e0e0; padding: 10px; margin: 5px 0px 0px 0px; cursor: pointer; } .menu-btn:hover { background: #000; color: #fff; } .drop_container { max-height: 0; display: none; } .show { display: block; max-height: 300px; transition: max-height 0.3s ease; } .drop_container.hide { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; } .drop_container > .item { display: flex; flex-direction: column; margin-left: 10px; padding: 10px 0px 0px 0px; } <div class="dropdown-menu"> <div class="menu-btn">One</div> <div class="drop_container"> <a class="item" href="#">Contact Us</a> <a class="item" href="#">Visit Us</a> </div> <div class="menu-btn">Two</div> <div class="drop_container"> <a class="item" href="#">Contact Us</a> <a class="item" href="#">Visit Us</a> </div> </div>