Есть меню типо аккордеона, нужно сделать что бы открытый пункт можно было закрыть, то есть что бы 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>
Добавила 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>
Если я правильно понимаю вопрос.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
подскажите, как использовать VBO в libgdx? У меня проблема, что есть персонаж с костями, и их должно быть много, и проседает fps, и хотел бы ускорить...
Ребята, выручайте, методы не работают правильно почему-тоГеттеры и Сеттеры классов Автор и Сообщение работают исправно, они прошли тест