Javascript 为什么这个.classList.toggle（"；classname"；）也会影响它的父级？

我正在创建一个网站，我在使用javascript时遇到了一些问题。我有这个功能：

function offerboxclick(obj) {
    obj.classList.toggle("menuelementclicked");
}

我的html如下所示：

<div class="menuelement" onclick="offerboxclick(this)">
    <div class="arrowbox">
            <div class="stripe1"></div>
            <div class="stripe2"></div>
    </div>
    <div class="menutext">Menu level 0</div>
    <level>
        <div class="menuelement" onclick="offerboxclick(this)">
            <div class="arrowbox">
                    <div class="stripe1"></div>
                    <div class="stripe2"></div>
            </div>
            <div class="menutext">Menu level 1</div>
        </div>
        <div class="menuelement" onclick="offerboxclick(this)">
            <div class="arrowbox">
                    <div class="stripe1"></div>
                    <div class="stripe2"></div>
            </div>
            <div class="menutext">Menu level 1</div>
        </div>
    </level>
</div>

<div class="menuelement" onclick="offerboxclick(this)">
    <div class="arrowbox">
            <div class="stripe1"></div>
            <div class="stripe2"></div>
    </div>
    <div class="menutext">Menu level 0</div>

</div>

菜单级别0
菜单级别1
菜单级别1
菜单级别0

我认为css代码与此无关，因为问题可能出在js函数上。如您所见，我有一个多级菜单，当我单击level 0元素以显示隐藏的level 1元素时，它工作正常。但是，当我单击任何级别1元素时，js函数在对象上确实可以正常工作，因为它在对象上切换“menuelementclicked”类。问题是，它还可以在父菜单元素中切换该类，因此同时打开level 2并关闭整个菜单。我真的不知道现在该怎么办。任何帮助都将不胜感激

---

另外，我试着将我的代码放在JSFIDLE上向您展示所有内容，但由于某种原因，它根本不起作用。0

您需要

stopPropagation

：

onclick=“offerboxclick.call（this，event）；”

和

函数offerboxclick（event）{this.classList.toggle（'menuelementclicked'）；event.stopPropagation（）}

@NiettheDarkAbsol非常感谢！它现在工作得很好：）