javascript - 创建带有按钮的多级汉堡菜单，可扩展汉堡级别

我想创建一个动画汉堡菜单，其中包含可展开下一级的按钮。我知道我的代码离那个很远，但我完全被这个问题困住了。无论如何都会向你展示我的进步。 https://jsfiddle.net/TheBB23/hnsjym9u/

我从网站上复制了这段代码，以便您清楚地了解我想要什么。 https://jsfiddle.net/TheBB23/uw2jzge1/

正如我所说，我完全被困住了，非常感谢任何帮助。

$('.circle-plus').on('click', function() {
  $(this).toggleClass('opened');
})

var coll = document.getElementsByClassName("hamburger");

var hideLinks = document.querySelectorAll('.mobilemenuitems a');

var i;

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


var hamburger = document.querySelector(".hamburger");
var header = document.querySelector(".header");
// On click
hamburger.addEventListener("click", function() {
  // Toggle class "is-active"
  hamburger.classList.toggle("is-active");
  header.classList.toggle("header--is-active");
  // Do something else, like open/close menu
});

document.onload = document.getElementsByClassName("mobilemenuspace")[0].style.display = "none";

document.getElementsByClassName("mobilemenuspace")[0].addEventListener("click", function() {
	this.style.display = "none";
  hamburger.classList.toggle("is-active");
});

body {
  margin: 0px;
  padding: 0px;
  background: white;
  color: #24603c;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
}

section {
  height: 50px;
  width: 100%;
}

/* Responsive (Smartphone) Menu */
@media (max-width: 1000px) {

  /* Bild oben links Style */
  .logo img {
    height: 50px;
    position: fixed;
    float: left;
    z-index: 3;
  }

  .login-container {
    display: none;
  }

  .LogoutArea {
    display: none;
  }


  #nav {
    display: none;
  }

  /* Platzhalter MenÃ¼*/
  section {
    height: 50px;
    width: 100%;
    background: rgba(237, 237, 237, 1);
    background: -moz-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237, 237, 237, 1)), color-stop(53%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff', GradientType=0);
  }

  .nav {
    height: 50px;
    width: 100%;
    background: #24603c;
    position: fixed;
    z-index: 2;
  }


  #BurgerSpace>div>button {
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 3;
    background: none;
  }

  #BurgerSpace {
    position: relative !important;
  }

  #BurgerSpace>div {
    position: relative !important;
  }

  #BurgerSpace>div>div {
    display: block;
    margin-top: 50px;
  }

  #BurgerSpace {
    width: 100%;
    height: 50px;
    display: block;
    position: absolute;
    float: right;
    margin-right: 0;
    padding-right: 0px;
    padding-top: -2px;
  }
}

.mobilemenuspace {
  display: none;
  width: 100%;
  position: relative;
  z-index: 1;
  right: 0;
  margin-top: 50px;
  background: white;
}

@media (min-width: 1000px) {
  .mobilemenuspace {
    display: none !important;
  }
}

#mobilemenufirstorder>a {
  text-decoration: none !important;
  font-weight: bold;
  list-style: none !important;
  font-size: 28px;
  line-height: 28px;
  height: 100%;
  display: block;
  height: 28px;
  padding-top: 26px;
  padding-bottom: 26px;
  padding-left: 25px;
}

#mobilemenufirstorder>a:hover {
  color: lightgrey !important;
}

#mobilemenufirstorder>a:hover+div {
  display: block !important;
}

#mobilemenufirstorder {
  height: 80px;
  width: 100%;
  border-bottom: solid 2px lightgrey;
  border-top: solid 2px lightgrey;
  list-style: none !important;
  text-decoration: none !important;
}

.mobilemenuitems>li {
  list-style: none;
  text-decoration: none;
}

.mobilemenuitems {
  display: block;
}


.mobilemenusecondorder {
  display: none;
}










.closed .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}

.closed .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
  opacity: 1;
}

.opened {
  opacity: 1;
}

.opened .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
}

.opened .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
  opacity: 0;
}

.circle-plus {
  height: 4em;
  width: 4em;
  font-size: 1em;
  opacity: 0.7;
}

.circle-plus .circle {
  position: relative;
  width: 2.55em;
  height: 2.5em;
}

.circle-plus .circle .horizontal {
  position: absolute;
  background-color: red;
  width: 30px;
  height: 5px;
  left: 50%;
  margin-left: -15px;
  top: 50%;
  margin-top: -2.5px;
}

.circle-plus .circle .vertical {
  position: absolute;
  background-color: red;
  width: 5px;
  height: 30px;
  left: 50%;
  margin-left: -2.5px;
  top: 50%;
  margin-top: -15px;
}


.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger:hover .hamburger-inner::after {
  background: lightgrey;
}

.hamburger:hover .hamburger-inner::before {
  background: lightgrey;
}

.hamburger:hover .hamburger-inner {
  background: lightgrey;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.header--is-active {
  display: flex;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script>
    function myFunction() {
      $('.mobilemenusecondorder').css('display', 'block');
    }

  </script>

</head>

<div class="nav">

  <div id="BurgerSpace">
    <div class="header">
      <button class="hamburger hamburger--collapse" type="button">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>

      <div class="mobilemenuspace">
        <div class="mobilemenuitems">


          <li>
            <div id="mobilemenufirstorder">
              <a href="?module=*Hockey">HOCKEY</a>

              <button onclick="myFunction()">
                <div class="circle-plus closed">
                  <div class="circle">
                    <div class="horizontal"></div>
                    <div class="vertical"></div>
                  </div>
                </div>

              </button>

            </div>




            <div class="mobilemenusecondorder">
              <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="#">Jugend <span class="fa arrow"></span></a>
                  <ul class="menulist">
                    <li class="menulevel2">
                      <a class=" " href="?action=*Hockey-Jugend">Jugend</a>
                    <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-Erwachsene">Erwachsene</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=*Hockey-Trainingsplan">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=events_gruppe&id=975">Kalender</a>
                </li>
              </ul>
            </div>
          </li>

          <li>
            <div id="mobilemenufirstorder">
              <a href="?module=*Tennis">TENNIS</a>

              <button onclick="myFunction()">
                <div class="circle-plus closed">
                  <div class="circle">
                    <div class="horizontal"></div>
                    <div class="vertical"></div>
                  </div>
                </div>


              </button>
            </div>




            <div class="mobilemenusecondorder">
              <ul class="menulist">
                <li class="menulevel1">
                  <a class=" " href="?action=*Tennis-Herren">HERREN</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=*Tennis-Damen">DAMEN</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=*Tennis-Jugend">JUGEND</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=*Tennis-Trainer">TRAINER</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=*Tennis-Schule">TENNISSCHULE</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=*_action_events_gruppe_id_976">KALENDER</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=platzbuchung_woche&id=117">PLATZBUCHUNG</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=*Tennis-Links">OFFIZIELLE LINKS</a>
                </li>
              </ul>
            </div>
          </li>

          <li>
            <div id="mobilemenufirstorder">
              <a href="?module=*UhlenTV">UHLEN.TV</a>

              <button onclick="myFunction()">
                <div class="circle-plus closed">
                  <div class="circle">
                    <div class="horizontal"></div>
                    <div class="vertical"></div>
                  </div>
                </div>


              </button>
            </div>




            <div class="mobilemenusecondorder"> </div>
          </li>

          <li>
            <div id="mobilemenufirstorder">
              <a href="?module=profile">MEIN.HTCU</a>

              <button onclick="myFunction()">
                <div class="circle-plus closed">
                  <div class="circle">
                    <div class="horizontal"></div>
                    <div class="vertical"></div>
                  </div>
                </div>


              </button>
            </div>




            <div class="mobilemenusecondorder">
              <ul class="menulist">
                <li class="menulevel1">
                  <a class=" " href="?action=profile_edit">PROFIL</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=start_news&cmd=list">ARTIKEL</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=profile_meinerechnungen">Meine Rechnungen</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=profile_mitgliedsbescheinigung">Meine Mitgliedsbescheinigung</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=profile_teilnahmebescheinigung">Meine Teilnahmebescheinigungen</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=profile_interessen">Meine Interessen</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=events_meinetermine">Meine Termine</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=admin_wunschmeine">Meine Support-Anfragen</a>
                </li>
              </ul>
            </div>
          </li>

          <li>
            <div id="mobilemenufirstorder">
              <a href="?module=admin">ADMIN</a>

              <button onclick="myFunction()">
                <div class="circle-plus closed">
                  <div class="circle">
                    <div class="horizontal"></div>
                    <div class="vertical"></div>
                  </div>
                </div>


              </button>
            </div>




            <div class="mobilemenusecondorder">
              <ul class="menulist">
                <li class="menulevel1">
                  <a class=" " href="#">KASSE <span class="fa arrow"></span></a>
                  <ul class="menulist">
                    <li class="menulevel2">
                      <a class=" " href="?module=kasse">KASSE</a>
                    <li class="menulevel2">
                      <a class=" " href="?action=kasse_tasks">Startseite</a>
                    </li>
                    <li class="menulevel2">
                      <a class=" " href="?action=kasse_beleg">SPESEN</a>
                    </li>
                    <li class="dropdown dropdown-submenu menulevel2">
                      <a href="#">Belege <span class="fa arrow"></span></a>
                      <ul class="menulist">
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_buchung&cmd=addmulti">Belegschnellerfassung</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_angebote">Angebote</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_rechnungneu">Neue Rechnung</a>
                        </li>
                      </ul>
                    </li>
                    <li class="menulevel2">
                      <a class=" " href="?action=members_beitragaktuell">BEITR�GE</a>
                    </li>
                    <li class="dropdown dropdown-submenu menulevel2">
                      <a href="#">Rechnungen <span class="fa arrow"></span></a>
                      <ul class="menulist">
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_buchungen&status=0">Rechnungen unverschickt</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_buchungen&status=1">Rechnungen offen</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_buchungen&status=2">Rechnungen in Bezahlung</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_buchungen&status=3">Rechnungen bezahlt</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_buchungen&status=6">Rechnungen alle</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_faellig">�bersichten</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_einzug">SEPA-�W/Einzug</a>
                        </li>
                      </ul>
                    </li>
                    <li class="dropdown dropdown-submenu menulevel2">
                      <a href="#">Buchf�hrung <span class="fa arrow"></span></a>
                      <ul class="menulist">
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_journal">Journal</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_guv">Gewinn und Verlust</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_bilanzoffenk">�bersichten</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_kontenrahmen">Kontenrahmen</a>
                        </li>
                      </ul>
                    </li>
                    <li class="dropdown dropdown-submenu menulevel2">
                      <a href="#">Barkasse <span class="fa arrow"></span></a>
                      <ul class="menulist">
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_barkasse&konto=1000">Hauptkasse</a>
                        </li>
                      </ul>
                    </li>
                    <li class="dropdown dropdown-submenu menulevel2">
                      <a href="#">Bankkonten <span class="fa arrow"></span></a>
                      <ul class="menulist">
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_kontouebersicht">(�bersicht)</a>
                        </li>
                        <li class="menulevel3">
                          <a class=" " href="?action=kasse_bank&bankkonto=250">Vereinskonto Sparkasse</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=admin_overview">�BERBLICK</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=admin_basis">BASISKONFIG</a>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=admin_optionen">OPTIONEN</a>
                </li>
                <li class="dropdown dropdown-submenu menulevel1">
                  <a href="#">VORLAGEN <span class="fa arrow"></span></a>
                  <ul class="menulist">
                    <li class="menulevel2">
                      <a class=" " href="?action=admin_mailtemplates">MAIL</a>
                    </li>
                    <li class="menulevel2">
                      <a class=" " href="?action=admin_pdftemplates">PDF</a>
                    </li>
                    <li class="menulevel2">
                      <a class=" " href="?action=admin_static">HTML</a>
                    </li>
                    <li class="menulevel2">
                      <a class=" " href="?action=admin_antraege">Antr�ge</a>
                    </li>
                  </ul>
                </li>
                <li class="menulevel1">
                  <a class=" " href="?action=admin_wunsch">Support-Anfragen</a>
                </li>
              </ul>
            </div>
          </li>


        </div>
      </div>
    </div>
  </div>
</div>

最佳答案

这是一个基本示例，您可以从这里开始，并在需要时对其进行改进。

$(function () {
        var $menu = $('.menu');
        var $menuItems = $menu.find('.menu-item');

        for (var i = 0; i < $menuItems.length; i++) {
            var $menuItem = $menuItems.eq(i);
            if ($menuItem.children('.children').length > 0) {

                var $expandCollapseButton = $menuItem.children('.children').hasClass('hidden')?$('<i class="fa fa-plus-square-o"></i>'):$('<i class="fa fa-minus-square-o"></i>');

                $expandCollapseButton.insertAfter($menuItem.find('> a')).on('click', expandCollapse);
            }
        }
    })

    function expandCollapse(e) {
        var $expandCollapseButton = $(this)
        var $children = $expandCollapseButton.siblings('.children');

        if($children.hasClass('hidden')){
            $expandCollapseButton.removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
        }else {
            $expandCollapseButton.removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
        }

        $children.toggleClass('hidden');
    }

a {
  text-decoration: none;
}

body {
  font-family: 'Ubuntu', sans-serif;
}

.menu-item {
  margin-bottom: 10px;
  min-width: 150px;
}

.menu-item>i {
  margin-left: 5px;
  cursor: pointer;
}

.menu-item>i:hover {
  color: crimson;
}

.child-item {
  margin-left: 20px;
}

.children {
  height: 80px;
  overflow: hidden;
  transition: height .4s;
}

.children.hidden {
  height: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu">
  <div class="menu-item">
    <a href="#">Item 1</a>
    <div class="children">
      <div class="child-item menu-item">
        <a href="#">Child 1 of Item 1</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 2 of Item 1</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 3 of Item 1</a>
      </div>
    </div>
  </div>
  <div class="menu-item">
    <a href="#">Item 2</a>
    <div class="children hidden">
      <div class="child-item menu-item">
        <a href="#">Child 1 of Item 2</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 2 of Item 2</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 3 of Item 2</a>
      </div>
    </div>
  </div>
  <div class="menu-item">
    <a href="#">Item 3</a>
    <div class="children">
      <div class="child-item menu-item">
        <a href="#">Child 1 of Item 3</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 2 of Item 3</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 3 of Item 3</a>
      </div>
    </div>
  </div>
  <div class="menu-item">
    <a href="#">Item 4</a>
  </div>
  <div class="menu-item">
    <a href="#">Item 5</a>
  </div>
</div>

关于javascript - 创建带有按钮的多级汉堡菜单，可扩展汉堡级别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58842489/

javascript - 创建带有按钮的多级汉堡菜单，可扩展汉堡级别

上一篇：html - 什么是html中的<hover-sprite>标签以及如何有效使用？

下一篇：html - 如何给div添加边距