如何修改多个元素的display属性？按钮点击仅首个箭头生效问题解决

我有一个包含4个按钮的列表，想要实现点击按钮时，对应右侧的箭头图标切换显示/隐藏状态。但目前代码仅对第一个按钮生效，点击其他按钮没有任何反应。

• 初始状态：列表中每个按钮右侧都显示箭头图标
• 点击后效果：只有第一个按钮的箭头状态改变，其余按钮无变化

我的HTML代码 #

<ul class="sec2drop">
  <li>
    <button onclick="myFunction()" class="collapsible">
      Prepare for a language exam
      <i class="fa fa-caret-right" id="arrow"></i>
    </button>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. A
        veniam, blanditiis, dolores quasi quam, soluta porro ratione
        fugiat minus commodi in maxime amet fugit rerum magnam ducimus
        dignissimos quis non.
      </p>
    </div>
  </li>
  <li>
    <button onclick="myFunction()" class="collapsible">
      Hungarian for kids
      <i class="fa fa-caret-right" id="arrow"></i>
    </button>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. A
        veniam, blanditiis, dolores quasi quam, soluta porro ratione
        fugiat minus commodi in maxime amet fugit rerum magnam ducimus
        dignissimos quis non.
      </p>
    </div>
  </li>
</ul>

我的JavaScript代码 #

function myFunction() {
  var x = document.getElementById("arrow");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

问题核心是HTML中ID属性必须唯一，你给所有箭头都用了id="arrow"，而document.getElementById()只会返回第一个匹配的元素，所以只有第一个按钮生效。以下是两种可行的修改方式：

方法1：通过传入当前按钮元素定位箭头 #

修改HTML的点击事件，把当前按钮对象this传入函数：

<button onclick="myFunction(this)" class="collapsible">
  Prepare for a language exam
  <i class="fa fa-caret-right"></i>
</button>

同时删除所有箭头的id="arrow"，然后更新JavaScript函数：

function myFunction(btn) {
  // 获取当前按钮内的箭头元素
  const arrow = btn.querySelector(".fa-caret-right");
  arrow.style.display = arrow.style.display === "none" ? "block" : "none";
}

方法2：事件委托（更推荐） #

完全移除HTML中的onclick属性，通过父容器统一监听点击事件，代码更简洁易维护：

<ul class="sec2drop">
  <li>
    <button class="collapsible">
      Prepare for a language exam
      <i class="fa fa-caret-right"></i>
    </button>
    <div class="content">
      <p>...</p>
    </div>
  </li>
  <!-- 其余按钮结构保持一致 -->
</ul>

对应的JavaScript代码：

const listContainer = document.querySelector(".sec2drop");
listContainer.addEventListener("click", function(e) {
  // 判断点击的是按钮元素
  if (e.target.classList.contains("collapsible")) {
    const arrow = e.target.querySelector(".fa-caret-right");
    arrow.style.display = arrow.style.display === "none" ? "block" : "none";
  }
});

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