1

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

我想出了如何只使用查询选择来做到这一点。请参见以下示例：

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”的类来实现相同的目标。然而，这就是我最初被教导做手风琴的方式。

这是为了我自己的练习。

我很感激帮助。

4

2 回答 2

0

尝试这个：

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 元素。

于 2019-10-19T14:45:09.767 回答
0

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

返回一个querySelectorAll()列表。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";
      }
    });
  });
于 2019-10-19T14:48:06.417 回答