【发布时间】：2017-10-17 21:32:11
【问题描述】：
我目前正在开发一种更复杂的手风琴。手风琴应该有 4 个按钮（第 0-3 节）和单独的内容（lorem ipsum 0-3）。通过单击“第 0 部分”，它应该显示“lorem ipsum 0”。通过单击“第 1 节”，内容“lorem ipsum 0”将替换为“lorem ipsum 1”。
最终的网站将有未知数量的行，每行包含 4 个手风琴。这意味着，脚本必须是动态的。
我的方法是使用 JS 生成 ID，为每个面板设置此属性，然后再次调用它们以使手风琴工作。但我只能调用所有内容（如JSFiddle）或循环中的最后一个。
如何在不丢失布局的情况下显示/替换每个手风琴的内容？
也许有更好的方法来实现这一点？
HTML:
<div class="row">
<div class="three columns">
<button class="accordion">Section 0</button>
</div>
<div class="three columns">
<button class="accordion">Section 1</button>
</div>
<div class="three columns">
<button class="accordion">Section 2</button>
</div>
<div class="three columns">
<button class="accordion">Section 3</button>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div class="panel">
<p>Lorem ipsum 0...</p>
</div>
</div>
<div class="twelve columns">
<div class="panel">
<p>Lorem ipsum 1...</p>
</div>
</div>
<div class="twelve columns">
<div class="panel">
<p>Lorem ipsum 2...</p>
</div>
</div>
<div class="twelve columns">
<div class="panel">
<p>Lorem ipsum 3...</p>
</div>
</div>
</div>
JS：
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var writeID = document.getElementsByClassName("panel");
for (var y = 0; y < writeID.length; y++) {
var newID = "demo-"+y;
writeID[y].setAttribute("id", newID);
var panel = document.getElementById(newID);
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
}
我还创建了一个JSFiddle。
感谢任何帮助！
干杯' 最大
编辑：我真的很感激这里的任何帮助。我试图用闭包和 forEach 解决这个问题，但没有成功。如果我必须澄清以上任何内容，我很乐意回答任何问题。
这是代码的当前状态。它给了我所有的内容，但我只想为每个手风琴得到一个：
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
for (var i = 0; i < acc.length; i++) {
var panel = document.getElementById("demo-"+i);
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
};
}
}
或者换句话说，我试图以一种动态的方式实现这一目标
var acc = document.getElementsByClassName("accordion");
acc[0].onclick = function() {
this.classList.toggle("active");
var panel = document.getElementById("demo-0");
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
acc[1].onclick = function() {
this.classList.toggle("active");
var panel = document.getElementById("demo-1");
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
【问题讨论】：
-
在给出我的方法之前，让我试着理解你的问题！每个按钮的内容会是动态的吗，我想它会是，对吧？按钮也一样？
-
是的，内容将是动态的。它可以是文本或图像。这些按钮将遵循某种模式，因此它们将具有固定的名称（如示例中所示）。
-
我现在阅读了很多关于 javascript 循环附件的内容，但仍然无法弄清楚。有人来寻求帮助吗？谢谢！
标签： javascript html css accordion