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

Question

我正在创建一个包含汉堡菜单的网站。单击按钮时，子菜单会展开。一切都按应有的方式进行，但是当我展开子菜单时，菜单的其余部分不会向下移动，并且开始重叠。我希望如果您展开子菜单，菜单的其余部分将向下移动。我该如何完成？我在这个jsfiddle中将问题减少到最小：https://jsfiddle.net/TheBB23/8nsuhjav/

请注意，在jsfiddle的底部是以下脚本：

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

感谢您的帮助。

Answer 1

问题出在CSS中，部分原因是HTML的结构方式。打开div标记之前不需要两个body，建议您将它们放在主体内（如果您确实希望在代码中使用它们）。另一方面，您有li但没有父级ul HTML5可以原谅我，但是为什么不将类div的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>

类似于CSS：

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

它将按照您期望的方式工作，您只需添加更多样式即可使其在视觉上更具吸引力。注意：当您使用position: any-valid-value时，浏览器会将元素从其自然上下文中删除，因此，如果不考虑这一点，元素可能会重叠。

PS-将ul与li元素嵌套是有效的HTML。