Меню аккордеон, как закрыть активный пункт меню?

299
20 декабря 2021, 19:00

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

P.S. Джиес только начал изучать сильно не ругайте :)

var toggleMenu = document.getElementsByClassName("main-footer__btn"), 
    menuList = document.getElementsByClassName("menu-list"); 
 
for (var i = 0; i < toggleMenu.length; i++) { 
  toggleMenu[i].addEventListener("click", function() { 
    if (!(this.classList.contains("main-footer__btn--active"))) 
      for (var i = 0; i < toggleMenu.length; i++) { 
        toggleMenu[i].classList.remove("main-footer__btn--active"); 
      } 
      this.classList.add("main-footer__btn--active"); 
  }) 
}
.menu-list { 
    display: none; 
    position: relative; 
  } 
 
  .main-footer__btn.main-footer__btn--active + .menu-list, 
  .main-footer__btn.main-footer__btn--active + .main-footer__address-wrapper > .menu-list { 
    display: block; 
    padding-bottom: 26px; 
  }
<div class="main-footer__menu-box"> 
  <h3>Разделы сайта</h3> 
  <button class="main-footer__btn"> 
    <span class="visually-hidden">Открыть меню</span> 
  </button> 
  <ul class="menu-list"> 
    <li class="menu-list__item"> 
      <a href="#">О компании</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Продукты</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Производство печатных плат</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Монтаж печатных плат</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Комплектующие</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Доставка</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Контакты</a> 
    </li> 
  </ul> 
</div> 
<div class="main-footer__address-box"> 
  <h3>Наш офис</h3> 
  <button class="main-footer__btn main-footer__btn--active"> 
    <span class="visually-hidden">Открыть меню</span> 
  </button> 
  <address class="main-footer__address-wrapper"> 
    <ul class="menu-list"> 
      <li class="menu-list__item"> 
        <p>г. Мытищи, Олимпийский проспект, д.10</p> 
      </li> 
      <li class="menu-list__item"> 
        <p> 
          <a href="tel:+74955894050">+7 (495) 589-40-50</a> 
        </p> 
      </li> 
      <li class="menu-list__item"> 
        <p> 
          <a href="tel:+79250038767">+7 (925) 003-87-67</a> 
        </p> 
      </li> 
      <li class="menu-list__item"> 
        <p> 
          <a href="tel:+792692608079">+7 (926) 926-080-79</a> 
        </p> 
      </li> 
    </ul> 
  </address> 
</div>

Answer 1

Добавила else { this.classList.remove("main-footer__btn--active"); } :

var toggleMenu = document.getElementsByClassName("main-footer__btn"), 
    menuList = document.getElementsByClassName("menu-list"); 
 
for (var i = 0; i < toggleMenu.length; i++) { 
  toggleMenu[i].addEventListener("click", function() { 
    if (!(this.classList.contains("main-footer__btn--active"))) { 
      for (var i = 0; i < toggleMenu.length; i++) { 
        toggleMenu[i].classList.remove("main-footer__btn--active"); 
      } 
      this.classList.add("main-footer__btn--active"); 
    } else { 
      this.classList.remove("main-footer__btn--active"); 
    } 
       
  }); 
}
.menu-list { 
    display: none; 
    position: relative; 
  } 
 
  .main-footer__btn.main-footer__btn--active + .menu-list, 
  .main-footer__btn.main-footer__btn--active + .main-footer__address-wrapper .menu-list { 
    display: block; 
    padding-bottom: 26px; 
  }
<div class="main-footer__menu-box"> 
  <h3>Разделы сайта</h3> 
  <button class="main-footer__btn"> 
    <span class="visually-hidden">Открыть меню</span> 
  </button> 
  <ul class="menu-list"> 
    <li class="menu-list__item"> 
      <a href="#">О компании</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Продукты</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Производство печатных плат</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Монтаж печатных плат</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Комплектующие</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Доставка</a> 
    </li> 
    <li class="menu-list__item"> 
      <a href="#">Контакты</a> 
    </li> 
  </ul> 
</div> 
<div class="main-footer__address-box"> 
  <h3>Наш офис</h3> 
  <button class="main-footer__btn main-footer__btn--active"> 
    <span class="visually-hidden">Открыть меню</span> 
  </button> 
  <address class="main-footer__address-wrapper"> 
    <ul class="menu-list"> 
      <li class="menu-list__item"> 
        <p>г. Мытищи, Олимпийский проспект, д.10</p> 
      </li> 
      <li class="menu-list__item"> 
        <p> 
          <a href="tel:+74955894050">+7 (495) 589-40-50</a> 
        </p> 
      </li> 
      <li class="menu-list__item"> 
        <p> 
          <a href="tel:+79250038767">+7 (925) 003-87-67</a> 
        </p> 
      </li> 
      <li class="menu-list__item"> 
        <p> 
          <a href="tel:+792692608079">+7 (926) 926-080-79</a> 
        </p> 
      </li> 
    </ul> 
  </address> 
</div>

Если я правильно понимаю вопрос.

READ ALSO
Использование VBO в LibGdx

Использование VBO в LibGdx

подскажите, как использовать VBO в libgdx? У меня проблема, что есть персонаж с костями, и их должно быть много, и проседает fps, и хотел бы ускорить...

189
Неправильно работают методы

Неправильно работают методы

Ребята, выручайте, методы не работают правильно почему-тоГеттеры и Сеттеры классов Автор и Сообщение работают исправно, они прошли тест

179