добавить функцию slideToggle ()

Question

Наверное, довольно просто, но я новичок в javascript / jquery. В следующем jsfiddle у меня есть меню, которое открывается / закрывается при нажатии на кнопку. Меню открывается при нажатии кнопки и закрывается при повторном нажатии кнопки или ссылке в меню. Меню всегда должно входить и выходить. Не имеет значения, используете ли вы кнопку или ссылку. Если есть лучший способ, чем slideToggle, то, конечно, можно использовать этот метод. https://jsfiddle.net/TheBB23/dfnewt4y/1/

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");
});

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

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



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

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

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

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




.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;
}

<div class="nav">

</div>

<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">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <h2> Login</h2>

        <li>
          <a href="#">CLUB</a>
          <ul class="menulist">
            <li class="menulevel1">
              <a class=" " href="?module=*kontakt">Kontakt</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?module=*vorstand">Vorstand</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?module=*mitgliedsantrag">Mitgliedschaft</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?module=*ueber_uns">Über uns</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="?module=*Hockey">HOCKEY</a>
          <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>
        </li>

        <li>
          <a href="?module=*Tennis">TENNIS</a>
          <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>
        </li>

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

        <li>
          <a href="?module=profile">MEIN.HTCU</a>
          <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>
        </li>

        <li>
          <a href="?module=admin">ADMIN</a>
          <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>
        </li>




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

Answer 1

Несколько улучшений кода, которые вы можете сделать:

1) Используйте синтаксис ES6 везде, где это возможно. Например, let , const , функция жирной стрелки . 2) В вашем DOM есть только один класс гамбургеров. Таким образом, вместо использования getElementsByClassName и зацикливания на нем. Вы можете использовать querySelector () . Кроме того, вы взяли класс гамбургера, на который ссылаются дважды:

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

var hamburger = document.querySelector(".hamburger");

3) Вы дважды определили логику обработчика щелчков в своем коде. Оба могут быть объединены. Итак, ниже оба кодовых блока могут быть объединены в один.

coll[i].addEventListener("click", function() {...}
hamburger.addEventListener("click", function() {...}

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

Вам не нужно делать это в JavaScript. В CSS в классе mobilemenuspace просто добавьте display:none

5) document.getElementsByClassName("mobilemenuspace")[0] Опять же, поскольку вы хотите выбрать только 1 mobilemenuspace, вы можете использовать document.querySelector.

Это поможет сократить код в строках и улучшить правильное использование синтаксиса и методов. Для анимации вы делаете переключение классов, которые являются правильными. А CSS-анимации дешевле, чем JS-анимации. То, на что вы можете обратить внимание, это иметь большую плавность при переключении только в CSS.

Спасибо, NS