使用 JavaScript 动态切换具有相同类名的多个元素的显示状态-html教程-PHP中文网

使用 JavaScript 动态切换具有相同类名的多个元素的显示状态

心靈之曲

发布： 2025-10-01 16:16:35

原创

511人浏览过

使用 javascript 动态切换具有相同类名的多个元素的显示状态

本文旨在解决当页面上存在多个具有相同类名的元素，并且需要通过点击事件分别控制它们的显示与隐藏时，如何使用原生 JavaScript 实现正确的功能。重点在于如何避免所有操作都只影响到第一个元素的问题，通过索引的方式，确保每个元素都能独立响应点击事件。

当处理多个具有相同类名的元素，并希望通过 JavaScript 为每个元素添加独立的行为时，直接使用 document.querySelector 可能会导致问题。querySelector 只会返回匹配选择器的第一个元素，因此后续的操作都会集中在该元素上，而忽略了其他具有相同类名的元素。解决此问题的关键在于使用 document.querySelectorAll 获取所有匹配的元素，并利用索引来区分和操作它们。

问题分析

假设我们有一组卡片，每个卡片都有一个“选项”按钮和一个下拉菜单。点击任何一个“选项”按钮，都应该只显示或隐藏对应卡片的下拉菜单。如果使用 querySelector 来选择下拉菜单元素，那么无论点击哪个“选项”按钮，都只会影响到第一个下拉菜单。

立即学习“Java免费学习笔记（深入）”；

解决方案

使用 querySelectorAll 获取所有元素： 将 document.querySelector(".dropdown-content") 替换为 document.querySelectorAll(".dropdown-content")。这将返回一个包含所有下拉菜单元素的 NodeList。
在 forEach 循环中使用索引： 在遍历按钮的 forEach 循环中，添加索引参数。这个索引将对应于按钮在 optionsButton 数组中的位置，也对应于其关联的下拉菜单在 dropdownContent NodeList 中的位置。

落笔AI
AI写作，AI写网文、AI写长篇小说、短篇小说

41

查看详情
使用索引访问对应的元素： 在事件监听器中，使用索引来访问 dropdownContent NodeList 中对应的下拉菜单元素，并切换其 show-dropdown 类。

代码示例

const optionsButton = Array.from(document.querySelectorAll(".dropdown-toggle"));
const dropdownContent = document.querySelectorAll(".dropdown-content");

optionsButton.forEach((button, index) => {
  button.addEventListener("click", () => {
    dropdownContent[index].classList.toggle("show-dropdown");
  });
});

登录后复制

HTML 结构示例

<ul>
  <li>
    <h1>Title</h1>
    <p>blah blah blah</p>
    <button class="dropdown-toggle">Options</button>
    <div class="dropdown-content">
      <a href="#">Edit</a>
      <a href="#">Delete</a>
    </div>
  </li>
  <li>
    <h1>Title</h1>
    <p>blah blah blah</p>
    <button class="dropdown-toggle">Options</button>
    <div class="dropdown-content">
      <a href="#">Edit</a>
      <a href="#">Delete</a>
    </div>
  </li>
  <li>
    <h1>Title</h1>
    <p>blah blah blah</p>
    <button class="dropdown-toggle">Options</button>
    <div class="dropdown-content">
      <a href="#">Edit</a>
      <a href="#">Delete</a>
    </div>
  </li>
</ul>

登录后复制

CSS 样式示例

ul {
  display: flex;
  list-style: none;
}

li {
  margin: 0 2em;
}

.dropdown-content {
  display: none;
  flex-direction: column;
}

.show-dropdown {
  display: flex;
}

.dropdown-content a {
  padding: 10px 0;
}

登录后复制

注意事项