Javascript 打开可折叠文件时向下移动网站的其余部分

我正在创建一个带有汉堡包菜单的网站。 单击按钮时，子菜单将展开。一切都按它应该的方式运行，但当我展开子菜单时，菜单的其余部分不会向下移动，并且开始重叠。 我希望如果你展开子菜单，菜单的其余部分向下移动。 我如何做到这一点？ 在本JSFIDLE中，我将问题降至最低：

请记住，JSFIDLE的底部有以下脚本：

    <script>
var acc = document.getElementsByClassName("expandsubmenu");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

var acc=document.getElementsByClassName（“展开子菜单”）；
var i；
对于（i=0；i

---

非常感谢您的帮助。

问题出在您的CSS中，部分原因在于HTML的结构方式。在打开

body

标记之前，您拥有的两个

div

是不必要的，我建议您将它们放在body中（如果您真的想将它们放在代码中）。 另一方面，你有

li

但是没有父母

ul

HTML5会原谅我，我明白了，但是为什么不把

div

和class

mobilemenuitems

一起改成

ul

，然后这样做：

  <div id="BurgerSpace">
  <div class="header">
    <div class="mobilemenuspace">
      <ul class="mobilemenuitems">
        <li>
          <a href="?module=start">CLUB</a>
          <button class="expandsubmenu">
            <div class="circle-plus closed">
              <div class="circle">
                <div class="horizontal"></div>
                <div class="vertical"></div>
              </div>
            </div>
          </button>
          <ul class="menulist">
            <li class="menulevel1">
              <a class=" " href="?module=*Ueber-Uns">�ber uns</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?module=*Mitgliedsantrag"
                >Mitgliedschaft</a
              >
            </li>
            <li class="menulevel1">
              <a class=" " href="?module=*Vorstand">Vorstand</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?module=*Kontakt">Kontakt</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?module=*Gastronomie">Gastronomie</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?module=*Partner">Partner</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="?module=*Hockey">HOCKEY</a>
          <button class="expandsubmenu">
            <div class="circle-plus closed">
              <div class="circle">
                <div class="horizontal"></div>
                <div class="vertical"></div>
              </div>
            </div>
          </button>
          <ul class="menulist">
            <li class="menulevel1">
              <a class=" " href="?action=*1-Herren">1. Herren</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*1-Damen">1. Damen</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Hockey-Erwachsene">Erwachsene</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="#"
                >Jugend <span class="fa arrow"></span
              ></a>
              <ul class="menulist">
                <li class="menulevel2">
                  <a class=" " href="?action=*Hockey-Jugend">Jugend</a>
                </li>

                <li class="menulevel2">
                  <a class=" " href="?action=*mja">M�nnliche Jugend A</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*mjb">M�nnliche Jugend B</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*kna">A-Knaben</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*knb">B-Knaben</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*knc">C-Knaben</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*knd">D-Knaben</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*kne">E-Knaben</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*wja">Weibliche Jugend A</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*wjb">Weibliche Jugend B</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*maa">A-M�dchen</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*mab">B-M�dchen</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*mac">C-M�dchen</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*mad">D-M�dchen</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*mae">E-M�dchen</a>
                </li>
              </ul>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Hockey-Plan">Trainingsplan</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Hockey-Schiedsrichter"
                >Schiedsrichter</a
              >
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Hockey-Links">Offizielle Links</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Hockey-Kalender">Kalender</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

它将以你期望的方式工作，你只需要添加更多的样式，使其在视觉上具有吸引力。 注意-当您使用

position:any有效值

时，浏览器会将元素从其自然上下文中删除，因此如果您不考虑这一点，元素可能会重叠

---

PS-使用

li

元素嵌套

ul

是有效的HTML

问题是你的CSS不是javascript。什么？到底是什么问题？我必须使用不同的位置属性吗？是的，skobaljic。我做错了什么？我真的很想理解我做错了什么…如果你把扩展列表放在绝对位置，它就会从流中删除，这意味着其他内容不会移动。谈论

.menulist

。

.mobilemenuitems,
.menulist {
  list-style-type: none;
}
.expandsubmenu {
  position: absolute;
  right: 6px;
}