点击标题旁tarrow箭头切换表格显示隐藏功能异常咨询

问题修复方案 #

你遇到的问题由3处代码错误导致，按下面步骤修改即可生效：

错误原因

• classList.toggle() 传入类名不需要加.前缀，你当前加了.导致元素被添加了带点的错误类，这也是控制台输出class="content .showTable"的直接原因
• 类名大小写不匹配：JS中写的是showTable（驼峰大写T），CSS中定义的是showtable（全小写），名称不一致无法触发样式
• CSS选择器逻辑错误：你是给.content元素本身添加控制类，原选择器.content .showtable匹配的是.content的子元素带.showtable的节点，逻辑不匹配

修正代码

1. 替换JS代码：

let tarrow = document.querySelectorAll(".tarrow");
for (var i = 0; i < tarrow.length; i++) {
  tarrow[i].addEventListener("click", (e)=>{
    let tarrowParent = e.target.parentElement.parentElement;
    // 去掉前缀点，改用和CSS一致的小写类名
    tarrowParent.classList.toggle("showtable");
  });
}

2. 替换CSS中表格显示控制的两行代码：

/* 原有默认隐藏逻辑保留，替换显示逻辑的选择器 */
.content .bantable {
  display: none;
}
/* 匹配.content自身带showtable类的场景，表格用display: table更规范 */
.content.showtable .bantable {
  display: table;
}

可选优化（点击箭头切换方向）

如果需要点击后箭头向上，额外添加以下CSS即可：

.content.showtable .tarrow {
  transform: rotate(180deg);
  transition: all 0.4s ease;
}

内容的提问来源于stack exchange，提问作者David