javascript - 将 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()。 此外，您已经参加了两次引用的汉堡包类(class):

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 个移动菜单空间，因此可以使用 document.querySelector。

这将有助于减少代码行数并更好地正确使用语法和方法。对于动画部分，您正在切换正确的类。由于 CSS 动画比 JS 动画便宜。您可以研究的是仅在 CSS 中切换时更加流畅。

谢谢， NS