点击箭头切换div内容与图标时上箭头无法隐藏内容的问题咨询

问题根因 #

• 两套点击逻辑完全分离：你同时为箭头元素绑定了两个独立点击事件，addEventListener负责内容显隐，行内onclick负责箭头类名切换，二者没有做状态同步，显隐逻辑中没有判断当前内容的展开状态，每次点击都会强制展示当前对应内容
• 初始事件绑定逻辑有局限：首次绑定事件仅选中了类名为.fa-angle-double-down的元素，虽然类名切换后事件绑定依然生效，但显隐逻辑中没有做收起分支的判断，永远只会走展示流程
• 代码冗余：针对test1/test2的单独判断完全没有必要，可通过data-Type属性的值实现通用逻辑

修正后代码 #

JS代码（直接替换原有JS即可） #

const arrowElements = document.querySelectorAll(".works-h i");
const contentElements = document.querySelectorAll(".describe");

arrowElements.forEach(arrow => {
  arrow.addEventListener("click", function() {
    const contentType = this.getAttribute("data-Type");
    const targetContent = document.querySelector(`.${contentType}`);
    const isCollapsed = this.classList.contains("fa-angle-double-down");

    // 若需要手风琴效果（一次仅展开一个内容），保留以下两行，不需要可删除
    arrowElements.forEach(el => el.className = "fas fa-angle-double-down");
    contentElements.forEach(el => el.style.display = "none");

    if (isCollapsed) {
      // 展开逻辑
      this.className = "fas fa-angle-double-up";
      targetContent.style.display = "block";
    } else {
      // 收起逻辑
      this.className = "fas fa-angle-double-down";
      targetContent.style.display = "none";
    }
  });
});

HTML代码（仅需删除行内onclick属性即可） #

<div class="works-h">
  <p1>titte1</p1><i data-Type="test1" class="fas fa-angle-double-down"></i><br>
  <div class="describe test1" style="display: none;">kontent1</div>
  <br><br>
  <p1>tittle2</p1><i data-Type="test2" class="fas fa-angle-double-down"></i><br>
  <div class="describe test2" style="display: none;">kontent2</div>
</div>

最优实践建议 #

• 不要混用行内事件绑定和addEventListener，统一在JS中管理所有事件逻辑，方便状态同步和后续维护
• 操作类名优先使用classList的add/remove/toggle方法，避免直接覆盖className导致其他类名丢失
• 若项目基于Vue/React等前端框架开发，可直接将展开/收起状态存储在组件的响应式变量中，无需手动操作DOM，逻辑会更简洁易维护

内容的提问来源于stack exchange，提问作者Patryk Kobyłka