Estoy tratando de crear un menú plegable que pueda editar independientemente de cualquier página en la que lo cargue sin usar ningún iframe. Soy nuevo en diseño web; Estoy familiarizado con CSS y HTML, y apenas estoy aprendiendo JavaScript. Apenas estoy familiarizado con jQuery o AJAX.

Aquí está el script que estoy usando para un menú plegable:

 var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); }

 .collapsible { background: none; cursor: pointer; border: none; text-align: left; outline: none; } .content { margin-left: 18px; display: none; overflow: hidden; }

 <div id="menu"> <button type="button" class="collapsible">Menu</button> <div class="content"> <a href="link.html" class="menu">Option 1</a><br> <a href="link2.html" class="menu">Option 2</a> </div> </div>

Esto funciona bien, pero cuando intento cargar el html en el div usando AJAX:

 var xhr = new XMLHttpRequest(); xhr.open('GET', 'menu.html', true); xhr.onreadystatechange = function () { if (this.readyState !== 4) return; if (this.status !== 200) return; document.getElementById('menu').innerHTML = this.responseText; }; xhr.send();

donde "menu.html" es simplemente esto y nada más:

 <button type="button" class="collapsible">Menu</button> <div class="content"> <a href="link.html" class="menu">Option 1</a><br> <a href="link2.html" class="menu">Option 2</a> </div>

El HTML se carga perfectamente bien, pero los menús plegables ya no responden.

Busqué y encontré un par de preguntas similares a las mías, pero no parecían tener respuestas que funcionaran. Si alguien pudiera ayudarme a determinar por qué sucede esto y cómo solucionarlo, estaría profundamente agradecido.