Question

我目前有2个下拉框，它们是相同的类和诸如此类的，数据正在填充来自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>

上面有两个，当我在页面上显示时，点击它时只会打开第一个下拉菜单。

以下是当前正在使用的JavaScript，我从另一个调整，但它们都不允许打开所有复选框。

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

    checkList.onclick = function (evt)
    {
    if (checkList.classList.contains('visible'))
        checkList.classList.remove('visible');
    else
        checkList.classList.add('visible');
    }   
}

原始代码就是这个...但是当我包含两个list1下拉列表时它遇到了问题。

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中，但甚至没有工作：http://jsfiddle.net/3GY74/1/

Answer 1

ID应该是唯一的！确保两个列表都有不同的ID。此外，如果您希望将多个事件附加到列表，则可能需要使用addEventListener而不是onclick，因为.onclick仅支持1。

Answer 2

他们都有相同的身份证吗？您需要确保ID是唯一的，并且您的函数会考虑正确的元素：

我建议你改变：

<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)
{

这将允许“checkList”变量依赖于已激活的元素。

为什么onclick Javascript不能用于多个dropDowns？

2 个答案: