时间戳

首页 > 解决方案 > CSS类遍历DOM。语法错误？

javascript - CSS类遍历DOM。语法错误？

问题描述

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

我的脚本在下面，有问题的行是“var panel line”，我想知道如何使用 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）在回答后从这个问题中删除，因为我觉得这对其他来这篇文章的人没有必要或有帮助；如果您想查看它，如果您单击编辑按钮，其余代码可用]

标签： javascriptjqueryhtmldomdom-traversal

解决方案

快速回答，document.queryselector('class') 将找到包含指定类的所有代码部分。这篇 W3 文章解释了跨不相关代码部分的 DOM 遍历的相关属性。很棒的 w3 文章链接

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

非常感谢 showdev 建议使用 queryselector 函数。（当他对此答案做出贡献时，请务必对他的评论进行投票）

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

        <!--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！

推荐阅读