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

Answer 2

javascript getElementById仅返回单个元素，因此它仅适用于您带有ID的第一个找到的元素。

getElementsByClassName返回具有相同类的已找到元素的数组，因此在向元素上的事件添加侦听器时，您需要遍历此数组并单独添加到该数组。

一个函数触发相同的类元素单击

2 个答案: