将类添加到Javascript中的下一个同级元素

如何添加切换类？当我单击锚定标记时，它应该只将类添加到下一个同级元素（

.treeUlChild

）。我做了很多尝试，试图找到解决办法，但没有成功。我是新手，这是我的第一个javascript项目。 这是我的html代码

    <div id="treeList" class="treeDiv">
    <ul class="treeUl">
        <li>
            <a href="#">GUIDELINES</a>
            <ul class="treeUlChild treeLevel2">
                <li><a href="#"> Guidlines 1</a></li>
                <li><a href="#"> Guidlines 2</a></li>
                <li><a href="#"> Guidlines 3</a></li>
                <li><a href="#"> Guidlines 4</a></li>
            </ul>
            <!-- End Child Ul -->
        </li>
        <li>
            <a href="#">AFTER-SALES</a>
            <ul id="test" class="treeUlChild treeLevel2">
                <li><a href="#">xyz</a></li>
                <li>
                    <a href="#">def</a>
                    <ul class="treeUlChild treeLevel3">
                        <li>
                            <a href="#">  ASSETS</a>
                            <ul class="treeLevel4">
                                <li><a href="#">DIGITAL</a></li>
                                <li><a href="#">OOH</a></li>
                                <li><a href="#">POS</a></li>
                                <li><a href="#">PRINT</a></li>
                                <li><a href="#">SOCIAL GIF</a></li>
                                <li><a href="#">SOCIAL VIDEOS</a></li>
                            </ul>
                            <!-- End Child Ul -->
                        </li>
                    </ul>
                    <!-- End Child Ul -->
                </li>
            </ul>
            <!-- End Child Ul -->
        </li>
    </ul>
    <!-- End treeUl -->
</div>

---

顺便说一句，有一种非常简单的使用引导的方法。 但是，如果您想使用纯Javascript实现这一点，那么您的方法是正确的

因此，首先，将查询选择器转换为对象，例如：

var el =  document.querySelector('#treeList ul li a');

forEach方法，查询在多个对象数组中单击的单个对象：

el.forEach(yourFunctionName());

向元素添加函数：

<li><a onclick="yourFunctionName()" href="#"> Guidlines 1</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 2</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 3</a></li>
<li><a onclick="yourFunctionName()" href="#"> Guidlines 4</a></li>

---

一个问题是

nextSibling

返回节点对象，最好使用

nextElementSibling

返回元素节点。另一个问题是

querySelector

将始终返回带有指定选择器的第一个元素，因此无论单击哪个链接，更改都将反映在同一元素上。您可以使用

querySelectorAll

，它将所有元素作为节点列表返回，并循环遍历每个元素并应用更改。另一件事是，最好使用

event.target

来单击元素，而不是再次使用选择器

document.querySelectorAll('#treeList ul li a').forEach(elem => elem.addEventListener("click", function(){
    event.target.nextElementSibling.classList.toggle('done');
}));

function myFunctionName(){
document.querySelector('.treeUlChild').nextSibling.classList.toggle('done');
}

document.querySelectorAll('#treeList ul li a').forEach(elem => elem.addEventListener("click", function(){
    event.target.nextElementSibling.classList.toggle('done');
}));