I'm trying to create a collapsible menu I can edit independently of any page I load it on without using any iframes. I'm new to web design; I'm familiar with CSS and HTML, and am just learning JavaScript. I have barely any familiarity with jQuery or AJAX.

Here's the script I'm using for a collapsible menu:

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

This works fine, but when I attempt to load the html into the div using 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();

where "menu.html" is simply this and nothing else:

<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>

The HTML loads in perfectly fine, but the collapsible menus are no longer responsive.

I've looked and found a couple questions similar to mine, but they didn't seem to have answers that worked. If anyone could help me determine why this happens and how to fix it I would be deeply grateful.

CodePudding user response：

You need to (re-)attach the event handlers after you have changed your HTML.

function setupMenu() {
  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";
      }
    });
  }
}

function getMenu() {
  // wait 500ms to simulate an Ajax call...
  setTimeout(function () {
    document.getElementById('menu').innerHTML = `<button type="button" >Menu</button>
  <div >
    <a href="link.html" >Option 1</a><br>
    <a href="link2.html" >Option 2</a>
  </div>`;
    setupMenu();   // <--- now
  }, 500);
}

getMenu();

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

<div id="menu">loading...</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>