addEventListener点击事件首次需双击切换Div显隐的问题修复咨询

你遇到的首次点击无效、需要双击的问题，根源在于初始状态下setter-container的style.width是空字符串。

因为你大概率是通过外部CSS（不是元素的style属性）设置的初始宽度4vw，而element.style.width只能读取内联样式（也就是写在元素标签里的style属性），所以第一次点击时，if (style.width == "4vw")的条件不成立，代码会进入else分支，把宽度重新设为4vw（和初始状态一样），看起来没变化；第二次点击时，style.width已经被设置成了4vw，条件才会成立，触发正确的展开逻辑。

推荐用CSS类控制状态的方式，这种方法更健壮，也更容易维护：

步骤1：添加CSS类定义 #

在你的样式表中添加两个类，分别对应收缩和展开状态：

#setter-container {
  /* 可选：添加过渡动画，让切换更平滑 */
  transition: width 0.3s ease;
}

/* 收缩状态 */
#setter-container.collapsed {
  width: 4vw;
}

/* 展开状态 */
#setter-container.expanded {
  width: 95vw;
}

步骤2：修改HTML，给初始状态加类 #

给setter-container加上初始的collapsed类：

<div id="setter-container" class="collapsed">
  <!-- Button Right -->
  <div id="setter-arrow-right">
    <p>SETTER</p>
    <span id="setter-back">
      <p>>></p>
    </span>
  </div>
</div>

步骤3：修改JS逻辑，通过类切换状态 #

// 先获取元素，避免重复查询DOM，提升性能
const setterContainer = document.getElementById("setter-container");
const setterBack = document.getElementById("setter-back");
const scrapContainer = document.getElementById("scrap-container");

document.getElementById("setter-arrow-right").addEventListener("click", function() {
  // 判断当前是否处于收缩状态
  if (setterContainer.classList.contains("collapsed")) {
    // 切换到展开状态
    setterContainer.classList.remove("collapsed");
    setterContainer.classList.add("expanded");
    setterBack.innerHTML = `<`;
    scrapContainer.style.display = "none";
  } else {
    // 切换到收缩状态
    setterContainer.classList.add("collapsed");
    setterContainer.classList.remove("expanded");
    setterBack.innerHTML = `>`;
    scrapContainer.style.display = "block";
  }
});

备选方案（如果坚持用内联样式判断） #

如果你不想用类，也可以直接给setter-container加上内联初始宽度，让style.width初始值就是4vw：

<div id="setter-container" style="width:4vw">

这样你的原JS代码就能正常工作，第一次点击就会触发展开逻辑。

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