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

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

霞舞

发布： 2025-10-01 17:21:07

原创

720人浏览过

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

本文旨在解决使用 JavaScript 为具有相同类名的多个元素添加点击事件，并分别控制它们的显示状态的问题。通过修改 JavaScript 代码，利用 querySelectorAll 获取所有目标元素，并结合 forEach 循环和索引，确保点击事件能够正确地作用于对应的元素，实现独立的显示/隐藏切换功能。

在 Web 开发中，经常会遇到需要控制多个具有相同类名的元素的显示状态的情况，例如，多个卡片都包含一个“选项”按钮，点击后显示对应的下拉菜单。如果使用不当，可能会导致点击一个按钮，却影响到其他卡片的下拉菜单，或者总是影响到第一个卡片。本文将介绍如何使用 JavaScript 正确地实现这一功能。

问题分析

问题的核心在于如何正确地将点击事件与对应的下拉菜单关联起来。原始代码使用 document.querySelector(".dropdown-content") 来选择下拉菜单元素，这只会返回页面上第一个匹配的元素。因此，无论点击哪个按钮，都会影响到第一个下拉菜单。

解决方案

为了解决这个问题，需要使用 document.querySelectorAll(".dropdown-content") 来获取所有下拉菜单元素的集合。然后，在为每个按钮添加事件监听器时，使用 forEach 循环提供的索引来访问对应的下拉菜单元素。

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

以下是修改后的 JavaScript 代码：

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");
  });
});

登录后复制

关键修改点：

Tellers AI

Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。

查看详情

querySelectorAll: 使用 document.querySelectorAll(".dropdown-content") 获取所有类名为 dropdown-content 的元素，返回一个 NodeList。
forEach 循环索引: 在 optionsButton.forEach 循环中，增加了 index 参数，用于标识当前按钮在集合中的位置。
索引访问: 在事件处理函数中，使用 dropdownContent[index] 来访问与当前按钮对应的下拉菜单元素，并切换其 show-dropdown 类。

完整代码示例

以下是包含 HTML、CSS 和 JavaScript 的完整代码示例：

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;
}

登录后复制

JavaScript:

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");
  });
});

登录后复制