javascript - 使用纯 JS 并使用 nextElementSibling 制作多层 Accordion

Question

Javascript 新手。我最近发布了一个关于创建多个多层 Accordion 的问题。我得到了一些很好的反馈，但有人提到，如果我的 HTML 设置正确，我可以通过使用 nextElementSibling 实现相同的目标，从而拥有更干净的 JS。

我想出了如何仅使用 queryselect 来做到这一点。请参阅下面的示例:

HTML:

<div class="mainAccordion">
    <h2>dropdown one</h2>
    <h3>dropdown two</h3>
    <p>content content content content</p>
</div>

CSS:

.mainAccordion {
    background-color:lightblue;
    width:200px;
    margin:auto;
    padding:3%;
}
.mainAccordion :nth-child(1){
    background-color: blue;
    padding:3%;
    cursor:pointer;
    color:white;
}

.mainAccordion :nth-child(2){
    background-color:yellow;
    cursor:pointer;
    max-height:0;
    overflow:hidden;
}

.mainAccordion :nth-child(3){
    font-weight:bold;
    max-height:0;
    overflow:hidden;
}

还有 JS:

var mainAccordion = document.querySelector(".mainAccordion").addEventListener("click", function(e) {
    if (e.target.nextElementSibling.style.maxHeight) {
        e.target.nextElementSibling.style.maxHeight = null;
    } else {
        e.target.nextElementSibling.style.maxHeight = e.target.nextElementSibling.scrollHeight + "px";
    }
});

这按预期工作。但是，当我引入多个多层 Accordion 并切换到“querySelectorAll”时，它停止工作。另外，根据浏览器的不同，我有时会收到一条错误消息，指出我的“addEventListener”不是一个函数。

见下文:

HTML:

<div class="mainAccordion">
    <h2>dropdown one</h2>
    <h3>dropdown two</h3>
    <p>content content content content</p>
</div>

<div class="mainAccordion">
    <h2>dropdown one</h2>
    <h3>dropdown two</h3>
    <p>content content content content</p>
</div>

CSS:

body {
    display:flex;
    width: 900px;
    margin:auto;
}
.mainAccordion {
    background-color:lightblue;
    width:200px;
    margin:auto;
    padding:3%;
}
.mainAccordion :nth-child(1){
    background-color: blue;
    padding:3%;
    cursor:pointer;
    color:white;
}

.mainAccordion :nth-child(2){
    background-color:yellow;
    cursor:pointer;
    max-height:0;
    overflow:hidden;
}

.mainAccordion :nth-child(3){
    font-weight:bold;
    max-height:0;
    overflow:hidden;
}

和 JS:

var mainAccordion = document.querySelectorAll(".mainAccordion").addEventListener("click", function(e) {
    if (e.target.nextElementSibling.style.maxHeight) {
        e.target.nextElementSibling.style.maxHeight = null;
    } else {
        e.target.nextElementSibling.style.maxHeight = e.target.nextElementSibling.scrollHeight + "px";
    }
});

我尝试将“querySelectorAll(".mainAccordion") 更改为 getElementsByClassName("mainAccordion") 但也不起作用。

forEach 是否以某种方式参与其中？

注意:我知道您也可以通过切换具有“max-height:0;overflow:hidden”的类来实现相同的目标。然而，这就是我最初学习拉 Accordion 的方式。

这是我自己的练习。

非常感谢您的帮助。

Answer 1

试试这个:

let accordionElements = document.querySelectorAll(".mainAccordion");

    accordionElements.forEach(element => {
        element.addEventListener("click", function(e) {
            if (e.target.nextElementSibling.style.maxHeight) {
                e.target.nextElementSibling.style.maxHeight = null;
            } else {
                e.target.nextElementSibling.style.maxHeight = e.target.nextElementSibling.scrollHeight + "px";
            }
        })
    });

这是因为 querySelector() 返回了一个 HTML 元素。对于querySelectorAll()，它是一个NodeList。在您的示例代码中，您尝试将事件附加到节点列表，这是不可能的。

您需要在内部循环，然后将事件附加到内部的每个 HTML 元素。