javascript - 表中的简单手风琴js问题
问题描述
我在我的 WP 站点中添加了一个表格插件的代码片段,它应该在表格的每个产品行下添加一个手风琴,单击时将显示更多信息。
第一个手风琴正在正常工作,但是每个产品行下的所有其他手风琴在单击时都没有响应。
我怎样才能解决这个问题?
<script>
var i;
var acc = document.getElementsByClassName("accordion");
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "table-row") {
panel.style.display = "none";
} else {
panel.style.display = "table-row";
}
});
}
</script>
<tr class="accordion">
<td colspan="100">Find out more about
<?php global $product;
echo $product->get_short_description();
?>
</td>
</tr>
<tr class="panel">
<td colspan="100">
<?php global $product;
echo $product->get_description();
?>
</td>
</tr>
片段更新(似乎工作见评论)
var i;
var acc = document.getElementsByClassName("accordion");
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* this.classList.toggle("active") */;
var panel = this.nextElementSibling;
if (panel.style.display === "table-row") {
panel.style.display = "none";
} else {
panel.style.display = "table-row";
}
});
}
<table>
<tr class="accordion">
<td>Find out more about 1
</td>
</tr>
<tr class="panel">
<td>
Panel 1
</td>
</tr>
<tr class="accordion">
<td>Find out more about 2
</td>
</tr>
<tr class="panel">
<td>
Panel 2
</td>
</tr>
<tr class="accordion">
<td>Find out more about 3
</td>
</tr>
<tr class="panel">
<td>
Panel 3
</td>
</tr>
</table>
解决方案
推荐阅读
- html - 在 HTML 代码中找不到项目的 ID
- sql - 如何在不使用 sql 中的限制子句的情况下获取过去 6 周的数据?
- string - 需要帮助使用 masm 以 80x86 汇编语言连接两个字符串
- google-sheets - 谷歌表格/excel在行中重复高值->索引列问题
- python - 有没有一种好方法可以将 python 中的一系列 def 函数与 Tkinter 一个接一个地运行?
- java - 将指定区域的长纪元时间转换为 UTC 中的长纪元时间
- sql - 计算 AWS Athena 表中每个组的中位数
- java - 在 Spring Boot RestController 中区分带有查询参数的端点与没有查询参数的端点
- python - 如何为某个用户打开一个窗口 discord.py
- python - 安装 EmoPY 要求的问题