为什么onclick Javascript不适用于多个下拉列表？

我现在有两个下拉框，它们都是相同的类等等，数据中填充了来自MySQL的信息

<section id="list1" class="dropdown-check-list" onclick="firstDropDown()">
    <span class="anchor">Boards</span>
    <ul class="items">
        <li><input type="checkbox" value="'.$boardiD.'">'.$boardName.'</li>
    </ul>
</section>

原来的代码是这个。。。但当我包含两个列表1下拉列表时，它遇到了问题

var checkList = document.getElementById('list1');

checkList.getElementsByClassName('anchor')[0].onclick = function (evt)
{
if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
else
    checkList.classList.add('visible');
}

---

这里有一个问题：我尝试在锚中包含一个特定的id，并将其包含在javascript中，但都不起作用：

id应该是唯一的！确保两个列表具有不同的ID。此外，如果希望将多个事件附加到列表，您可能需要使用

addEventListener

而不是

onclick

，因为

。onclick

仅支持1。它们是否具有相同的id？您需要确保ID是唯一的，并且您的函数考虑了正确的元素：

我建议你改变：

<section id="list1" class="dropdown-check-list" onclick="firstDropDown()">

致：

这将允许“检查表”变量取决于激活的元素

<section id="list1" class="dropdown-check-list" onclick="firstDropDown()">

<section id="list1" class="dropdown-check-list" onclick="firstDropDown(this)">

function firstDropDown()
{
    var checkList = document.getElementById('list1');

function firstDropDown(checkList)
{