En una publicación relacionada con otra pregunta, un usuario me sugirió que modernizara el código js. Use específicamente x.classList.includes() , x.classList.add() y x.classList.remove() .

Así que traté de seguir la sugerencia e hice lo que ves a continuación. El menú desplegable funciona bien, la única duda que queda es cómo implementar x.classList.includes() ? Aunque todo funciona como debería, me gustaría saber si puedo mejorar aún más el código.

También quería entender cuál es la diferencia entre el código antiguo y el nuevo. ¿Hay algún cambio en el rendimiento, la funcionalidad o cualquier otra cosa? Lo siento pero soy nuevo, estoy tratando de aprender y la pila es muy útil.

También quería preguntar, ¿cómo puedo agregar un ícono al botón que cambia cuando el menú está abierto o cerrado? Aquí encuentras la pregunta sobre el icono, si me puedes ayudar te lo agradecería. Cómo agregar menú desplegable de iconos animados abierto / cerrado

Disculpen el mal inglés, no lo estoy haciendo muy bien.

Proyecto: https://jsfiddle.net/Snorlax93x/v0c39heo/2/

Antiguo código Js

 var menu = document.querySelector(".user_menu_button"); function myFunction() { var x = document.getElementById("Demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className += " w3-hide"; setTimeout(function(){ x.className = x.className.replace(" w3-show", ""); x.className = x.className.replace(" w3-hide", ""); }, 100) } }

Nuevo código Js

 var menu = document.querySelector(".user_menu_button"); function myFunction() { var x = document.getElementById("Demo"); if (x.className.indexOf("w3-show") == -1) { x.classList.add ("w3-show"); } else { x.classList.add("w3-hide"); setTimeout(function(){ x.classList.remove("w3-show"); x.classList.remove("w3-hide"); },100) } }