Question

我正在创建一个网站，我在使用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>

我认为css代码不相关，因为问题可能与js函数有关。正如你所看到的，我有一个多级菜单，当我点击0级元素来显示隐藏的1级元素时，它工作得很好。但是当我单击任何1级元素时，js函数在对象上运行正常，因为它会在其上切换“menuelementclicked”类。问题是它还在父菜单元素中切换此类，因此它同时打开2级并关闭整个菜单。我现在真的不知道该怎么做。任何帮助将不胜感激！

P.S。我尝试将我的代码放在jsfiddle上以显示所有内容，但由于某些原因它在那里根本不起作用0_o

为什么this.classList.toggle（“classname”）也会影响这个父母呢？

0 个答案: