纯JS制作多层手风琴并使用nextElementSibling

Question

Javascript 的新手。我最近发布了一个关于创建多个多层手风琴的问题。我得到了一些很好的反馈，但有人提到如果我的 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";
    }
});

这按预期工作。但是，当我引入多个多层手风琴并切换到 "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" 的 class 来实现相同的目标。然而，这就是我最初被教做手风琴的方式。

这是我自己的练习。

感谢您的帮助。

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 元素是 return。使用 querySelectorAll() 它是一个 NodeList。在您的示例代码中，您尝试将事件附加到不可能的节点列表。

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

Answer 2

我认为问题在于 querySelector() returns 文档中与指定选择器匹配的第一个元素。然后事件侦听器将应用于找到的第一个元素。

querySelectorAll()returns一个列表。你可以用 forEach 像这样

  var mainAccordion = document.querySelectorAll(".mainAccordion");
  console.log(mainAccordion);
  mainAccordion.forEach(accordion => {
    accordion.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";
      }
    });
  });

纯JS制作多层手风琴并使用nextElementSibling

Making multilayer accordions with pure JS and using nextElementSibling

javascript

accordion

addeventlistener

queryselector