JavaScript 不同元素中的手风琴

Question

当单击 "show" 以显示个人资料列表中的完整个人资料并使用另一个按钮将其关闭时，我正在尝试手风琴。

到目前为止我做了什么

<div class="short-pro">
<button class="show">Full Profile</button>
</div>
<div class="full-pro">
<button>close</button>
</div>

<div class="short-pro">
<button class="show">Full Profile</button>
</div>
<div class="full-pro">
<button>close</button>
</div>

<div class="short-pro">
<button class="show">Full Profile</button>
</div>
<div class="full-pro">
<button>close</button>
</div>

脚本：

var show = document.getElementsByClassName('show');
var full= document.getElementsByClassName('full-pro');

for (i = 0; i < accbtn.length; i++) {
 show[i].addEventListener("click", activeBtn());
}

function activeBtn() {
for (i = 0; i < active.length; i++) {
 full[i].classList.add("active");
 }
}

注意：关闭按钮尚未尝试。

希望您了解我要实现的目标。任何帮助将不胜感激！

Answer 1

你有几个问题：

你应该将变量 i 标记为 let
你应该将 i 传递给 activeBtn 函数

所以，你的代码应该是这样的：

var show = document.getElementsByClassName('show');
var full = document.getElementsByClassName('full-pro');
var close = document.getElementsByClassName('close');


for (let i = 0; i < show.length; i++) {
  show[i].addEventListener("click", function() {
    activeBtn(i); 
 });
}

for (let i = 0; i < close.length; i++) {
  close[i].addEventListener("click", function() {
    deactiveBtn(i); 
  });
}

function activeBtn(i) {
  full[i].classList.add("active");
}

function deactiveBtn(i) {
  full[i].classList.remove("active");
}

您可以在沙盒中查看完整示例：https://jsfiddle.net/73ktn6hc/3/#&togetherjs=t0jU1L4mI2

JavaScript 不同元素中的手风琴

JavaScript Accordion in a different element

javascript

accordion