Question

如何添加切换类？当我单击锚标记时，应仅将类添加到下一个兄弟元素（.treeUlChild）。我尝试了很多，并试图找到解决方案，但没有。我是新手，这是我在javacript中的第一个项目。这是我的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代码。

document.querySelector('#treeList ul li a').addEventListener("click", function(){
    document.querySelector('.treeUlChild').nextSibling.classList.toggle('done');
});

Answer 1

顺便说一下，使用Bootstrap的方法非常简单。但是，如果您想使用纯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>

ps：您可以简化此操作。

结构化功能：

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

Answer 2

一个问题是nextSibling返回一个节点对象，最好使用nextElementSibling返回一个元素节点。另一个问题是querySelector将始终返回具有指定选择器的第一个元素，因此无论单击哪个链接，更改都将始终反映在同一元素上。您可能更愿意使用querySelectorAll来返回所有元素作为节点列表，并遍历每个元素并应用更改。另一件事是，最好使用event.target获取被点击的元素，而不是再次使用选择器。

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

在Javescript

2 个答案: