Javascript / JQuery для гамбургера меню с несколькими уровнями

Question

Я создаю меню гамбургера с несколькими уровнями. Вот jsfiddle с основным кодом: https://jsfiddle.net/TheBB23/hnsjym9u/ Некоторые вещи работают нормально, другие нуждаются в улучшении. Я новичок в javascript и jquery, поэтому я думаю, что большинство проблем возникает там. Я перечислю здесь проблемы, с которыми я сталкиваюсь, и я был бы признателен, если бы вы мне помогли. 1. Нажатие + (кнопка расширения) не должно закрывать меню, меню должно закрываться и возвращаться в закрытое состояние при нажатии на ссылку в нем. 2. Нажатие на минус должно скрыть подменю, но не закрывать меню. 3. Нажатие на + должно только развернуть соответствующее подменю, сейчас оно открывает все меню. 4. Не так важно: есть ли способ отображать ссылки в виде блока (заполнить всю ширину) и располагать кнопки в одной строке (моя единственная идея - переместить их с помощью CSS на количество пикселей, которое я хочу, ноя думаю, это не лучшее решение)

Обратите внимание, что меню должно работать на бэкэнде, который не позволяет мне указывать каждую ссылку по-разному.

$('.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>