Question

我想切换课程＆＃34;倒塌＆＃34;关于每个元素＆＃34;类别＆＃34;当它被点击时。问题是，＆＃34;类别＆＃34;元素彼此嵌套，子元素也在父元素上切换类。

示例

HTML结构：

<div class="category">
    <div class="category">
        <div class="category"></div>
    </div>
</div>
<div class="category">
    <div class="category"></div>
</div>

使用Javascript：

var categories = document.getElementsByClassName("category");
for (var i = 0; i < categories.length; i++) {
    categories[i].addEventListener("click", function () {
        this.classList.toggle("collapsed");
    });
}

当我点击嵌套元素时，＆＃34;这个＆＃34;选择器还将选择类＆＃34;类别＆＃34;。

的父元素

Answer 1

这是因为事件冒泡并且在具有类的所有容器元素上触发。您应该致电event.stopPropagation()以防止此情况发生。

var categories = document.getElementsByClassName("category");
for (var i = 0; i < categories.length; i++) {
    categories[i].addEventListener("click", function (e) {
        e.stopPropagation();
        this.classList.toggle("collapsed");
    });
}

嵌套类名的eventlistener

1 个答案: