jQuery(document).ready(function( $ ){
var acc30 = document.getElementsByClassName("acc30");
var acc = document.querySelectorAll("accordion");
acc30.addEventListener("click", function () {
this.classList.toggle("active");
for (var i = 0; i < acc.length; i++) {
if (acc[i].getAttribute("data-following") === "0") {
acc[i].classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = acc[i].nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
});
});
大家好。我知道我们应该使它具有广泛的意义,但是关于此的几篇文章对我没有用,所以我变得很具体...
我正在使用“ accordian”按钮,这些按钮并不是真正的手风琴,它们一次可以打开多个面板。它们下面的面板被隐藏或显示。 acc30是全部展开按钮(适用于30个“ accordians”)。我还尝试通过Accordian数组迭代click(),并尝试使用getElementsByClassName(panel)在面板数组中仅使用代码的那部分迭代。 ...还有其他一些事情......我缺少一些重要的东西吗?
提前谢谢!
还有CSS ...:
.accordion {
background-color: #e5a000;
color: #f7f6f1;
cursor: default-button;
padding: 3%;
width: 100%;
text-align: left;
border: none;
border-radius: 0 !important;
transition-timing-function: ease;
transition: 12s;
}
.acc2 {
background-color: #66fff2 !important;
}
.acc30 {
background-color:transparent !important;
color:#e5a000;
cursor: default-button;
padding: 3%;
width: 100%;
text-align: left;
border: none;
border-radius: 0 !important;
transition-timing-function: ease;
transition: 12s;
font-weight:300;
}
每个手风琴演奏者使用此JS都可以正常工作:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}