純 JS 手風琴菜單

Question

所需的菜單結構實現：

• 菜單
  • 子菜單
    • 聯系人
    • 消息
    • 照片
  • 子菜單
  • 子菜單
  • 子菜單
• 菜單
• 菜單
• 菜單

通過單擊“菜單”按鈕，將打開“子菜單”元素列表。 單擊“子菜單”按鈕可打開菜單鏈接列表。 接下來就是任務了。 通過按下“菜單”按鈕，必須關閉所有其他“菜單”按鈕。 通過單擊“子菜單”按鈕，關閉所有其他“子菜單”按鈕。

我的代碼：

<https://codepen.io/artemkhmyrov/pen/oNMgGpd>

我只設法通過菜單的第一級，也就是說，我點擊“菜單”按鈕，“子菜單”中的列表打開，我點擊另一個“菜單”按鈕，前一個關閉，但是當我點擊“子菜單”時，一切都關閉了，請幫我做，我已經為這個任務苦苦掙扎了一個半月

Answer 1

歡迎來到 StackOverflow。

我建議您先重新排列您的 html 視圖。

<ul>
    <li>
      <a>Menu</a>
         <ul>
             <li>
                 <a>Sub Menu</a>
                   <ul>
                      <li>Contacts</li>
                      <li>News</li>
                      <li>Photo</li>
                   </ul>
             </li>
             <li>Sub Menu</li>
             <li>Sub Menu</li>
          </ul>
    </li>
    <li>
       <a>Menu</a>
    </li>
     /*-- and so on --*/
</ul>

從那里，您可以通過 JavaScript 指定要擴展的<li> 。

Answer 2

您的代碼令人困惑，對於多級菜單，您可以嘗試如下所示，

 const header = document.querySelector(".header"); const topBlock = header.querySelector(".header__top"); const burgerMenu = topBlock.querySelector(".burger-menu"); const burgerMenuIcon = burgerMenu.querySelector(".burger-menu__icon"); const burgerMenuBox = burgerMenu.querySelector(".burger-menu__box"); const container = burgerMenuBox.querySelector(".container"); const burgerMenuSub = container.querySelector(".burger-menu-sub"); if (burgerMenuIcon) { burgerMenuIcon.addEventListener("click", function () { burgerMenuIcon.classList.toggle("_active"); burgerMenuBox.classList.toggle("_active"); }); } let burgerMenuTitle = burgerMenuSub.querySelectorAll(".burger-menu-title"); let burgerMenuList = burgerMenuSub.querySelectorAll(".burger--menu-list"); let burgerMenuContent = burgerMenuSub.querySelectorAll(".burger-menu-content"); let burgerIcon = burgerMenuSub.querySelectorAll(".burger-icon"); let burgerMenuContentOpen = burgerMenuSub.querySelectorAll( ".burger-menu-content-open" ); function showMenu() { for (let i = 0; i < burgerMenuTitle.length; i++) { burgerMenuTitle[i].addEventListener("click", (e) => { closeMenu(); burgerMenuContent[i].classList.toggle("burger-menu-content"); }); } } function closeMenu() { for (let i = 0; i < burgerMenuContent.length; i++) { burgerMenuContent[i].classList.remove("burger-menu-content-open"); } } showMenu();

 *, *::before, *::after { box-sizing: border-box; } html { font-size: 0.7144vw; font-style: normal; font-weight: normal; line-height: 1.2; margin: 0; padding: 0; } ul li { margin: 0; padding: 0; list-style: none; }.container { width: 129.4rem; margin: 0 auto; }.header.container { display: flex; }.header__top { background-color: rgb(166, 170, 166); margin-bottom: 1.7rem; }.header__top.container { justify-content: space-between; align-items: center; height: 3.6rem; }.burger-icon { display: flex; width: 2.55rem; align-items: center; height: 2rem; justify-content: center; }.burger-icon.active::after { transition: all 0.9s ease 0s; transform: rotate(-225deg); }.burger-icon.active::before { transition: all 0.9s ease 0s; transform: rotate(225deg); }.burger-icon::after { transform: rotate(90deg); }.burger-icon::before, .burger-icon::after { position: absolute; content: ""; background-color: white; width: 0.2rem; height: 1.1rem; }.burger-menu { width: 3rem; }.burger-menu__icon { z-index: 15; display: block; position: relative; width: 2rem; height: 1.4rem; cursor: pointer; }.burger-menu__icon span, .burger-menu__icon:before, .burger-menu__icon:after { left: 0; position: absolute; height: 15%; width: 100%; transition: all 0.3s ease 0s; background-color: #fff; border-radius: 2rem; }.burger-menu__icon::before, .burger-menu__icon::after { content: ""; }.burger-menu__icon::before { top: 0; }.burger-menu__icon::after { bottom: 0; }.burger-menu__icon span { top: 50%; transform: scale(1) translate(0, -50%); }.burger-menu__icon._active span { transform: scale(0) translate(0, -50%); }.burger-menu__icon._active:before { top: 50%; transform: rotate(-45deg) translate(0, -50%); }.burger-menu__icon._active:after { bottom: 50%; transform: rotate(45deg) translate(0, 50%); }.burger-menu__box { position: absolute; top: -100%; right: 50%; transform: translate(50%, 0); min-height: 31rem; background-color: rgb(180, 180, 180); padding-top: 5rem; transition: all 0.3s ease 0s; z-index: 11; border-radius: 0 0 1.5rem 1.5rem; }.burger-menu__box.container { justify-content: center; color: white; font-size: 5rem; align-items: center; height: 100%; font-weight: bold; }.burger-menu__box._active { top: 0; }.burger-menu-content { margin-left: 2.4rem; display: none; right: 20%; }.burger-menu-content-open { display: block; }.burger-menu-title { padding: 1.1rem 0rem; display: flex; font-weight: 400; font-size: 1.6rem; line-height: 1.9rem; color: #ffffff; }.burger-menu-title:hover { cursor: pointer; }.burger-menu-title:hover >.burger-icon::before, .burger-menu-title:hover >.burger-icon::after { color: #4862b6; }.burger-menu-title:hover a { color: #4862b6; }.burger-menu-sub { width: 100%; display: flex; flex-direction: row; height: 100%; justify-content: space-around; }.burger-menu__section-wrap-link { padding: 0rem 0rem 0.9rem 3rem; line-height: 1.2rem; }.burger-menu__section-link { font-weight: 400; font-size: 1.6rem; color: #ffffff; }.burger-menu__section-link::before { content: ""; position: absolute; border-top: 0.3rem solid transparent; border-left: 0.4rem solid #fff; border-bottom: 0.3rem solid transparent; margin-left: -1rem; margin-top: 1.6rem; }.burger-menu__section-link:hover::before { border-left: 0.4rem solid #4862b6; }.burger-menu__section-links { font-weight: 400; font-size: 1rem; }.burger-menu__sub-sub-link { padding: 0rem 0rem 0.9rem 0rem; font-weight: 400; font-size: 1.6rem; line-height: 1.9rem; color: #ffffff; }.burger-menu__sub-sub-title { pointer-events: none; padding: 0rem 0rem 0.9rem 0rem; font-weight: 400; font-size: 1.6rem; line-height: 1.9rem; color: #ffffff; }.burger-menu__sub-item { width: 25rem; }.burger-menu-list { width: 28.5rem; }.burger-menu__wrap-accordion { padding: 0rem 0rem 2.5rem 2.5rem; overflow-y: scroll; display: flex; max-height: 115rem; width: 100%; flex-direction: row; }.burger-menu__wrap-accordion::-webkit-scrollbar { width: 0.001rem; background: green; }.burger-menu__wrap-item { padding: 1rem 0rem; display: flex; width: 100%; }

 <meta charset="UTF-8"> <meta name="viewport"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <body> <header class="header"> <div class="header__top"> <div class="container"> <div class="burger-menu"> <div class="burger-menu__icon"> <span></span> </div> <div class="burger-menu__box"> <div class="container"> <nav class="burger-menu-sub menu"> <div class="burger-menu__wrap-accordion"> <ul class="burger-menu-list"> <ul class="burger-menu-list"> <li class="burger-menu__item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> </ul> </li> </ul> <ul class="burger-menu-list"> <li class="burger-menu__item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> </ul> </li> </ul> </ul> <ul class="burger-menu-list"> <ul class="burger-menu-list"> <li class="burger-menu__item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> </ul> </li> </ul> <ul class="burger-menu-list"> <li class="burger-menu__item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> </ul> </li> </ul> </ul> </div> </nav> </div> </div> </div> </div> </div> </header> </body>

如果有任何疑問，請發表評論。