下拉点击事件总是触发第一个

Question

我试图在点击下拉菜单时显示它的内容。这是我的代码：

const dropdown = document.querySelectorAll('.dropdown-button');
const moveInfo = document.querySelector('.moves-row-detail');
const button = document.querySelector('.dropdown-button-image');

function showDropdown() {
  button.style.transform = 'rotate(90deg)';
  moveInfo.classList.remove('hidden');
  moveInfo.style.opacity = 1;
  moveInfo.style.transform = '';
  // console.log("show dropdown");
}

function hideDropdown() {
  button.style.transform = '';
  moveInfo.style.transform = `scaleY(0.01)`;
  moveInfo.classList.add('hidden');
  // console.log("hide dropdown");
}

function showMovesDetails() {
  if (moveInfo.classList.contains('hidden')) {
    showDropdown();
  } else {
    hideDropdown();
  }
}

dropdown.forEach(moves => moves.addEventListener('click', showMovesDetails));

.moves-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 2px 0;
}

.moves-row>span:first-child {
  flex: 1 1 auto;
  flex-basis: 15%;
}

.moves-row>span:nth-child(2) {
  flex: 1 1 auto;
  flex-basis: 50%;
  text-align: left;
  padding-left: 20px;
}

.moves-row>span:nth-child(3) {
  flex: 1 1 auto;
  flex-basis: 20%;
}

.dropdown-button {
  position: relative;
  width: 36px;
  height: 30px;
  background-color: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.dropdown-button-image {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij4KICAgIDxwYXRoIGQ9Ik0xNy4xNyAzMi45Mmw5LjE3LTkuMTctOS4xNy05LjE3TDIwIDExLjc1bDEyIDEyLTEyIDEyeiIgZmlsbD0iIzMzMyIvPgogICAgPHBhdGggZD0iTTAtLjI1aDQ4djQ4SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.hidden {
  display: none;
}

<div class="moves-row">
  <button class="dropdown-button">
      <span class="dropdown-button-image"></span>
    </button>
  <div class="moves-row-detail hidden" style="opacity: 1;transform: scaleY(0.01);">
    <div class="moves-row-stats"><span><strong>Power:</strong> 40</span><span><strong>Acc:</strong>
          100%</span><span><strong>PP:</strong> 35</span></div>
    <div class="move-description">Inflicts regular damage.</div>
  </div>
</div>

<div class="moves-row">
  <button class="dropdown-button">
      <span class="dropdown-button-image"></span>
    </button>
  <div class="moves-row-detail hidden" style="opacity: 1; transform: scaleY(0.01);">
    <div class="moves-row-stats"><span><strong>Power:</strong> N/A</span><span><strong>Acc:</strong>
          100%</span><span><strong>PP:</strong> 40</span></div>
    <div class="move-description">Lowers the target's Attack by one stage.</div>
  </div>
</div>
<div class="moves-row">
  <button class="dropdown-button">
      <span class="dropdown-button-image"></span>
    </button>
  <div class="moves-row-detail hidden" style="opacity: 1; transform: scaleY(0.01);">
    <div class="moves-row-stats"><span><strong>Power:</strong> 40</span><span><strong>Acc:</strong>
          100%</span><span><strong>PP:</strong> 25</span></div>
    <div class="move-description">Inflicts regular damage. Has a 10% chance to burn the target.</div>
  </div>
</div>

我想要实现的是：

应该能显示出它们对应的隐藏内容。例如，第一个下拉菜单应显示其数据：“造成常规伤害。”，第二个下拉菜单应显示“将目标的攻击降低一个阶段”。第三个应该显示“造成常规伤害。有 10% 的几率烧毁目标。”当它们被点击时。

像这样：

我的问题： 我能够在第一个下拉菜单上触发点击事件，但它不适用于第二个和第三个下拉菜单。每当我单击第二个和第三个时，它总是会显示第一个下拉列表的内容。如何分别触发它们的点击事件？

Answer 1

请使用以下 javascript 代码，它将提供所需的功能。

const dropdown = document.querySelectorAll(".dropdown-button");
let move, button;

function showDropdown() {
  button.style.transform = "rotate(90deg)";
  move.classList.remove("hidden");
  move.style.opacity = 1;
  move.style.transform = "";
  // console.log("show dropdown");
}

function hideDropdown() {
  button.style.transform = "";
  move.style.transform = `scaleY(0.01)`;
  move.classList.add("hidden");
  // console.log("hide dropdown");
}

function showMovesDetails(event) {
  const { currentTarget } = event;
  const { parentNode } = currentTarget;
  move = parentNode.querySelector(".moves-row-detail");
  button = parentNode.querySelector(".dropdown-button-image");
  if (move.classList.contains("hidden")) {
    showDropdown(parentNode);
  } else {
    hideDropdown(parentNode);
  }
}

dropdown.forEach(moves =>
  moves.addEventListener("click", event => showMovesDetails(event))
);

Answer 2

您可以通过为要显示/隐藏的每个信息项设置一个特定的类来做到这一点。

在下面的 sn-p 中，我将您的课程更改为：

moves-row-detail-<n>，其中 n 为 0、1 或 2，具体取决于您正在进行的移动。

然后，您的事件侦听器将该索引传递给您选择适当元素的函数。

参见下面的 sn-p：

const dropdown = document.querySelectorAll('.dropdown-button');
const button = document.querySelector('.dropdown-button-image');

function showDropdown(moveInfo) {
  button.style.transform = 'rotate(90deg)';
  moveInfo.classList.remove('hidden');
  moveInfo.style.opacity = 1;
  moveInfo.style.transform = '';
  // console.log("show dropdown");
}

function hideDropdown(moveInfo) {
  button.style.transform = '';
  moveInfo.style.transform = `scaleY(0.01)`;
  moveInfo.classList.add('hidden');
  // console.log("hide dropdown");
}

function showMovesDetails(i) {
  const moveInfo = document.querySelector(`.moves-row-detail-${i}`);
  if (moveInfo.classList.contains('hidden')) {
    showDropdown(moveInfo);
  } else {
    hideDropdown(moveInfo);
  }
}

dropdown.forEach((moves, i) => moves.addEventListener('click', () => showMovesDetails(i)));

.moves-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 2px 0;
}

.moves-row>span:first-child {
  flex: 1 1 auto;
  flex-basis: 15%;
}

.moves-row>span:nth-child(2) {
  flex: 1 1 auto;
  flex-basis: 50%;
  text-align: left;
  padding-left: 20px;
}

.moves-row>span:nth-child(3) {
  flex: 1 1 auto;
  flex-basis: 20%;
}

.dropdown-button {
  position: relative;
  width: 36px;
  height: 30px;
  background-color: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.dropdown-button-image {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij4KICAgIDxwYXRoIGQ9Ik0xNy4xNyAzMi45Mmw5LjE3LTkuMTctOS4xNy05LjE3TDIwIDExLjc1bDEyIDEyLTEyIDEyeiIgZmlsbD0iIzMzMyIvPgogICAgPHBhdGggZD0iTTAtLjI1aDQ4djQ4SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.hidden {
  display: none;
}

<div class="moves-row">
  <button class="dropdown-button">
      <span class="dropdown-button-image"></span>
    </button>
  <div class="moves-row-detail-0 hidden" style="opacity: 1;transform: scaleY(0.01);">
    <div class="moves-row-stats"><span><strong>Power:</strong> 40</span><span><strong>Acc:</strong>
          100%</span><span><strong>PP:</strong> 35</span></div>
    <div class="move-description">Inflicts regular damage.</div>
  </div>
</div>

<div class="moves-row">
  <button class="dropdown-button">
      <span class="dropdown-button-image"></span>
    </button>
  <div class="moves-row-detail-1 hidden" style="opacity: 1; transform: scaleY(0.01);">
    <div class="moves-row-stats"><span><strong>Power:</strong> N/A</span><span><strong>Acc:</strong>
          100%</span><span><strong>PP:</strong> 40</span></div>
    <div class="move-description">Lowers the target's Attack by one stage.</div>
  </div>
</div>
<div class="moves-row">
  <button class="dropdown-button">
      <span class="dropdown-button-image"></span>
    </button>
  <div class="moves-row-detail-2 hidden" style="opacity: 1; transform: scaleY(0.01);">
    <div class="moves-row-stats"><span><strong>Power:</strong> 40</span><span><strong>Acc:</strong>
          100%</span><span><strong>PP:</strong> 25</span></div>
    <div class="move-description">Inflicts regular damage. Has a 10% chance to burn the target.</div>
  </div>
</div>