如何通过JavaScript切换折叠面板的背景箭头图片

要实现折叠面板关闭时显示向下箭头、展开时显示向上箭头的效果，核心是利用你已经在JS中切换的active类来修改按钮背景图，不用大幅改动现有JS逻辑，只需调整CSS并修复语法错误即可，具体步骤如下：

1. 修复并调整CSS样式 #

你的原有CSS存在语法错误（button选择器的代码块未闭合），同时需要利用active类切换背景图：

.collapsible {
  background-color: white;
  color: #021032;
  cursor: pointer;
  padding: 14px;
  width: 100%;
  border: solid 1px #D1D3D4;
  border-radius: 6px;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 5px 0px;
  /* 默认（面板关闭）显示向下箭头 */
  background-image: url("../images/downArrow.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 5%;
}

/* 面板展开时（按钮有active类）显示向上箭头 */
.collapsible.active {
  background-image: url("../images/upArrow.svg");
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition:
    border 0.2s ease-out,
    max-height 0.2s ease-out;
  background-color: white;
  border: 0px solid #D1D3D4;
  border-radius: 3px;
}

#backArrow {
  width: 1%;
  padding: 0px;
  padding-right: 2px;
}

2. 保留现有JS逻辑（无需修改） #

你当前的JS代码已经正确实现了active类的切换，以及面板内容的展开/收起，完全可以继续使用：

document.querySelectorAll(".collapsible").forEach((coll) => {
  coll.addEventListener("click", () => {
    coll.classList.toggle("active");

    const content = coll.nextElementSibling;

    if (content.style.maxHeight) {
      content.style.maxHeight = null;
      content.style.borderWidth = 0;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
      content.style.borderWidth = "1px";
    }
  });
});

3. HTML结构保持不变 #

原有的HTML无需调整：

<button type="button" class="collapsible"> Consult Logs </button>
<div class="content">
  <div class="column">
    <p>Ensure the disc strength is not at “0”.</p>
  </div>
  <div class="column">
    <img src="../images/discStrength.png" alt="Picture of Logs">
  </div>
</div>

效果说明 #

• 初始状态（面板关闭）：按钮显示向下箭头
• 点击按钮后：JS为按钮添加active类，CSS自动切换为向上箭头，同时展开面板内容
• 再次点击：移除active类，箭头变回向下，面板收起

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