多个下拉菜单，即使我点击另一个，也只有一个有效

Question

所以，我正在尝试完成一个项目并运行遇到这个问题：当我单击任何下拉菜单时，只有第一个打开。如果有人帮助我，我将不胜感激，因为我是编程新手。

这是 HTML，所以基本上，当用户单击“TextArrowSection”div 区域时，下拉菜单应该打开。当我编写这个代码时，我可以只用一个下拉菜单来实现它，但是当我再添加一个时，只有第一个真正有效，即使我点击了第二个。

<div class="textElement">
  <div class="textArrowSection">
    <p class="visibleText">How many team members can I invite?</p>
    <img src="/images/icon-arrow-down.svg" class="arrowImage" alt="arrow" />
  </div>
  <div class="dropdown">
    <p class="dropdownText closedText">
      You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
    </p>
  </div>
  <hr class="line" />
</div>
<div class="textElement">
  <div class="textArrowSection">
    <p class="visibleText">How many team members can I invite?</p>
    <img src="/images/icon-arrow-down.svg" class="arrowImage" alt="arrow" />
  </div>
  <div class="dropdown">
    <p class="dropdownText closedText">
      You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
    </p>
  </div>
  <hr class="line" />
</div>

CSS

.dropdownText {
  color: #787887;
  font-weight: 400;
  width: 315px;
  font-size: 12px;
  line-height: 18px;
}
.openedText {
  display: block;
}
.closedText {
  display: none;
}

JavaScript

"use strict";

const clickArea = document.getElementsByClassName(`textArrowSection`);
const text = document.querySelector(`.dropdownText`);
const arrow = document.querySelector(`.arrowImage`);
const dropDown = document.querySelector(`.dropdownText`);

const closeDropDown = function () {
  text.classList.remove(`openedText`);
  text.classList.add(`closedText`);
  arrow.classList.add(`arrowImageClosed`);
  arrow.classList.remove(`arrowImageOpened`);
};

const openDropDown = function () {
  text.classList.add(`openedText`);
  text.classList.remove(`closedText`);
  arrow.classList.add(`arrowImageOpened`);
  arrow.classList.remove(`arrowImageClosed`);
};
for (var i = 0; i < clickArea.length; i++) {
  clickArea[i].addEventListener(`click`, function () {
    if (dropDown.classList.contains("closedText")) {
      openDropDown();
    } else {
      closeDropDown();
    }
  });
}

Answer 1

您刚刚获取第一个文本、箭头元素，您需要获取所有这些元素，使用 querySelectorAll 并为打开和关闭下拉功能传递索引。

也可以考虑使用 let 而不是 var。

const clickArea = document.getElementsByClassName(`textArrowSection`);
const text = document.querySelectorAll(`.dropdownText`);
const arrow = document.querySelectorAll(`.arrowImage`);
const dropDown = document.querySelectorAll(`.dropdownText`);

const closeDropDown = function(i) {
  text[i].classList.remove(`openedText`);
  text[i].classList.add(`closedText`);
  arrow[i].classList.add(`arrowImageClosed`);
  arrow[i].classList.remove(`arrowImageOpened`);
};

const openDropDown = function(i) {
  text[i].classList.add(`openedText`);
  text[i].classList.remove(`closedText`);
  arrow[i].classList.add(`arrowImageOpened`);
  arrow[i].classList.remove(`arrowImageClosed`);
};
for (let i = 0; i < clickArea.length; i++) {
  clickArea[i].addEventListener(`click`, function() {
    if (dropDown[i].classList.contains("closedText")) {
      openDropDown(i);
    } else {
      closeDropDown(i);
    }
  });
}

多个下拉菜单，即使我点击另一个，也只有一个有效

Multiple dropdowns, only one works even if I click another

javascript

css

drop-down-menu