javascript - 一个函数在同一个类元素上触发点击

Question

我正在尝试使用子类别和子子类别列表来控制类别列表。

这是HTML:

<ul class="selectbox-ul">
    <li>
        <div>Category</div>
        <ul class="selectbox-ul-child">
            <li>
                <div>Subcategory</div>
                <ul class="selectbox-ul-child">
                    <li>
                        <div>Sub-subcategory</div>
                    </li>
                </ul>
                <span id="trigger">icon</span>
            </li>
        </ul>
        <span id="trigger">icon</span>
    </li>
    ....
</ul>

所以我的目标是为 ul.selectbox-ul-child 添加类:

var trigger = document.getElementById("trigger");

function subCatStatus() {
    if(this.parentElement.children[1].className != "... expanded") {
        this.parentElement.children[1].className += " expanded"
    } else {
        this.parentElement.children[1].className == "..."
    };
};

trigger.addEventListener("click", subCatStatus);

它只适用于第一个span#trigger(显示子类别)，下一个(对于子子类别)什么都不做(我也试过使用 .getElementsByClassName 它没有用对于任何触发器)。所以我想得到一些解释为什么这个不起作用。以及如何使其发挥作用的一些建议。

Answer 1

正如其他人已经提到的，您不能堆叠具有相同 ID 的多个元素，因为 document.getElementById() 不应返回多个值。

您可以尝试将“触发器”类分配给每个跨度而不是 ID，然后尝试以下代码

var triggers = document.getElementsByClassName("trigger");

function subCatStatus() {
    if(this.parentElement.children[1].className != "... expanded") {
        this.parentElement.children[1].className += " expanded"
    } else {
        this.parentElement.children[1].className == "..."
    };
};

for(var i = 0; i < triggers.length; i++) {
    triggers[i].addEventListener("click", subCatStatus);
}