将 slideToggle() 添加到函数中

Posted 2023-05-08

【中文标题】将 slideToggle() 添加到函数中

【英文标题】：add slideToggle() to function

【发布时间】：2020-02-17 19:26:50

【问题描述】：

可能很容易，但我是 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>

【问题讨论】：

我有一些代码改进和问题： 1) .hamburger 类只是整个 DOM 中的一个。您可以使用查询选择器轻松获取它，并且可以保存循环。 [第 7 行]。 (2) 第 22-27 行：您还在 .hamburger 类上添加点击事件。您可以合并两个代码块 [第 7 行以后]（不知道为什么在这里制作了 2 个不同的块）。 (3) 这是建议：使用 ES6 语法

好吧，我对 JavaScript 完全陌生，只是不知道如何做得更好。我也不太明白你的意思...

【参考方案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 个您想要定位的移动菜单空间，您可以使用 document.querySelector。

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

谢谢， NS