Estaba haciendo un botón de menú para un sitio, así que cuando hago clic en el menú, cambia su HTML interno, pero cuando hago clic en el botón Cerrar, no cambia su HTML interno.
codigo js
function MENU() { var MENUITEMS = document.getElementById('MENU') MENUITEMS.innerHTML=" <a style='text-decoration:none;' href='OUR_WORKS.html'>OUR_WORKS</a><p class='LGND'>ABCD</p><button id='CLOSE'class='LGND' onclick='CLOSE()'>CLOSE_MENU</button>" } function CLOSE() { var MENUITEMS = document.getElementById('MENU') MENUITEMS.innerHTML=" <p onclick='MENU()' id='MENU'>MENU</p>" }Código HTML
<p onclick="MENU()" id="MENU" >MENU</p>Cada vez que haga clic en el contenedor #MENU , se mostrará el menú. El problema es que incluso cuando el menú está abierto , al hacer clic en #MENU se muestra el menú. Entonces, hacer clic en el botón "cerrar" cerrará el menú y luego lo abrirá nuevamente.
Una forma de solucionar esto es almacenando el estado del menú en una variable, como esta:
var OPEN = false, MENU_ELEM = document.getElementById("MENU"); function TOGGLEMENU(){ if(OPEN){ //menu is open, we need to close it OPEN = false; MENU_ELEM.innerHTML = "<p onclick='TOGGLEMENU()'>MENU</p>"; } else { //menu is closed, we need to open it OPEN = true; MENU_ELEM.innerHTML = "<a style='text-decoration:none;' href='OUR_WORKS.html'>OUR_WORKS</a><p class='LGND'>ABCD</p><button id='CLOSE'class='LGND' onclick='TOGGLEMENU()'>CLOSE_MENU</button>"; } } <div id="MENU"><p onclick="TOGGLEMENU()">Menu</p></div>Vea el ejemplo a continuación.
Algunas sugerencias:
p no está destinada a un botón. Utilice el elemento de button en su lugar.innerHTML únicamente a través de JavaScript interfiere con la accesibilidad. Considere usar marcado HTML estático y estilo CSS para lograr el efecto. const btn = document.querySelector('button'); const menu = document.querySelector('ul'); btn.addEventListener('click', toggle); function toggle() { menu.classList.toggle('active'); btn.classList.toggle('active'); } ul { opacity: 0; transform: translateX(-20px); pointer-events: none; transition: opacity .2s, transform .2s; } ul.active { opacity: 1; transform: translateX(0); pointer-events: all; } button.active::after { content: ' X'; } <button>MENU</button> <ul> <li> <h2>Our Works</h2> </li> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul>