[英]Accordion menu wondering
我在想。 我有这个简单的手风琴菜单:
问题是,当我有一个打开的菜单时,当我单击另一个菜单时,我想自动关闭上一个菜单。 换句话说,一次只能打开一个。
您如何看待,什么是最好的解决方案? 没有jQuery,我想要香草JS :)
var accordions = document.getElementsByClassName("accordion"); for (var i = 0; i < accordions.length; i++) { accordions[i].onclick = function() { this.classList.toggle('is-open'); var content = this.nextElementSibling; if (content.style.maxHeight) { // accordion is currently open, so close it content.style.maxHeight = null; } else { // accordion is currently closed, so open it content.style.maxHeight = content.scrollHeight + "px"; } } }
<button class="accordion">Accordian #1</button> <div class="accordion-content open"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class="accordion">Accordian #2</button> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class="accordion">Accordian #3</button> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> </div>
您可以遍历所有手风琴,并在单击任何手风琴时删除is-open
类:
var accordions = document.getElementsByClassName("accordion");
for (var i = 0; i < accordions.length; i++) {
accordions[i].onclick = function() {
for (var j = 0; j < accordions.length; j++) {
accordions[j].classList.remove('is-open');
}
accordions[i].classList.toggle('is-open');
}
}
然后使用CSS隐藏手风琴:
.accordion:not(.is-open) {
display: none;
}
您不必遍历所有手风琴,因为您可以保存最近打开的手风琴。 请参阅下面的我的解决方案。
var accordions = document.getElementsByClassName("accordion"); var openAccordion = null; for (var i = 0; i < accordions.length; i++) { accordions[i].onclick = function() { if (openAccordion != null && openAccordion != this) { openAccordion.classList.toggle('is-open'); var content = openAccordion.nextElementSibling; content.style.maxHeight = null; } this.classList.toggle('is-open'); var content = this.nextElementSibling; if (content.style.maxHeight) { // accordion is currently open, so close it content.style.maxHeight = null; } else { // accordion is currently closed, so open it content.style.maxHeight = content.scrollHeight + "px"; } openAccordion = this; }; }
.accordion-content { max-height: 0; overflow: hidden; }
<button class="accordion">Accordion #1</button> <div class="accordion-content open"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class="accordion">Accordion #2</button> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class="accordion">Accordion #3</button> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.