Javascript 多个下拉列表，即使单击另一个，也只有一个可用

因此，我试图完成一个项目，但遇到了这个问题：当我单击任何下拉列表时，只有第一个打开。如果有人能帮助我，我会非常感激，因为我在编程方面是个新手

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

我可以邀请多少团队成员

您最多可以在免费计划中邀请2名其他用户。高级计划对团队成员没有限制。

我可以邀请多少团队成员


您最多可以在免费计划中邀请2名其他用户。高级计划对团队成员没有限制。

CSS

.dropdownText{
颜色：#787887；
字体大小：400；
宽度：315px；
字体大小：12px；
线高：18px；
}
.openedText{
显示：块；
}
.closedText{
显示：无；
}

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

“严格使用”；
const clickArea=document.getElementsByClassName（`textArrowSection`）；
const text=document.querySelector（`.dropdowntText`）；
常量arrow=document.querySelector（`.arrowImage`）；
const dropDown=document.querySelector（`.dropdowntText`）；
const closeDropDown=函数（）{
text.classList.remove（`openedText`）；
text.classList.add（`closedText`）；
arrow.classList.add（`arrowmageclosed`）；
arrow.classList.remove（`arrowmageopened`）；
};
const openDropDown=函数（）{
text.classList.add（`openedText`）；
text.classList.remove（`closedText`）；
arrow.classList.add（`arrowmageopened`）；
arrow.classList.remove（`arrowmageclosed`）；
};
对于（变量i=0；i

您只需要获取第一个文本，即箭头元素，您需要获取所有文本， 使用querySelectorAll并传递打开和关闭下拉函数的索引

也考虑使用Lead代替V.< /P>

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

const clickArea=document.getElementsByClassName（`textArrowSection`）；
const text=document.querySelectorAll（`.dropdownttext`）；
const arrow=document.querySelectorAll（`.arrowImage`）；
const dropDown=document.querySelectorAll（`.dropdowntText`）；
const closeDropDown=函数（i）{
text[i].classList.remove（`openedText`）；
text[i].classList.add（`closedText`）；
arrow[i].classList.add（`arrowmageclosed`）；
arrow[i].classList.remove（`arrowmageopened`）；
};
const openDropDown=函数（i）{
text[i].classList.add（`openedText`）；
text[i].classList.remove（`closedText`）；
arrow[i].classList.add（`arrowmageopened`）；
arrow[i].classList.remove（`arrowImageClosed`）；
};
for（设i=0；i

document.querySelector（

.dropdownText

）它将首先。。。也谢谢你的快速帮助！我曾尝试使用您的代码，但出现以下错误：“script.js:23 Uncaught TypeError:无法读取未定义的属性'contains'。有什么想法吗？@kyrylolvov chek代码又忘了为DropDown添加索引！谢谢你，欧根。