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

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>

我很感激任何帮助。

标签： javascripthtmlcsshamburger-menu

Answer 1

The problem is in your CSS with is partly because of the way your HTML is structured. The two div's you have before opening the body tag is not necessary, I will suggest you put them within the body (if you really want them in your code). on the other hand, you have li but no parent ul HTML5 is forgiving i get it, but why not change th div with class mobilemenuitems to ul then do something like this:

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

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

it will be working the way you expect it you just have to add more styles to make it visually appealing. NB - when you use position: any-valid-value the element will be removed from its natural context by the browser so there might be an overlap of elements if you do not put that into consideration.

PS - nesting ul with an li element is valid HTML.