通过 CSS 类进行 DOM 遍历. 语法错误?

Question

回答的问题：如何通过搜索它的css类来找到最近的div。

我的脚本在下面，有问题的行是"var panel 行"，我想知道如何使用 CSS 类".panel"引用最近的对象并将其更改为可见。我认为这是某种语法错误，但如果是其他错误，请告诉我。我对这种代码很陌生，所以我感谢任何额外的花絮或建议。谢谢！

--代码如下--

<script>
var acc = document.getElementsByClassName("navpop");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.closest('.panel');
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>

[注意：额外的代码(HTML，CSS(在回答后从这个问题中删除了，因为我觉得这对其他来这篇文章的人没有必要或有帮助;如果你想看它，如果你点击编辑按钮，其余的代码是可用的]

Answer 1

快速回答，document.queryselector('class'( 将找到包含指定类的所有代码段。这篇 W3 文章介绍了跨与代码无关的代码部分遍历 DOM 的相关属性。真棒 W3 文章链接

好的，在showdev的建议的帮助下，我研究了查询选择器等其他属性，我已经解决了我的问题。在研究该属性后，我遇到了文档和查询选择器函数，该函数将在包含下面定义的指定类的文档中查找并执行所有div。

非常感谢 showdev 建议查询选择器函数。 (请务必对他的评论投赞成票，因为他对此答案做出了贡献(

下面的脚本是我成功的解决方案：

<!--Collapsing Button-->
<div>
<button class="navpop"> </button>

<!--Java-Script-->
<script>
var acc = document.getElementsByClassName("navpop");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = document.querySelector('.panel');
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>

真的很兴奋，我能够解决这个问题，我被困了几天，所以我真的很感谢你的帮助 showdev！