Html 子手风琴打不开

Question

我为我的网站创建了一个子手风琴，但是当我点击它时，文本没有出现。

尝试把其他的手风琴去掉，修改js代码，问题依旧

我认为 JavaScript 代码中存在问题，因为主手风琴正在工作。

我在 w3schools 上找到了教程。这是link：https://w3schools.com/howto/howto_js_accordion.asp

var acc = document.querySelectorAll('.accordion,.subaccordion');
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.accordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Poppins;
  font-size: 15px;
  transition: 0.4s;
  margin-top: .15rem;
  background-color:#fafafa;
}

.subaccordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Poppins;
  font-size: 15px;
  transition: 0.4s;
  margin-top: .15rem;
  background-color:#fafafa;
}


.active, .accordion:hover, .subaccordion:hover {
  background-color: #f0f0f0;
}

.accordion:after, .subaccordion:after {
  content: '[=12=]2B';
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "12";
}

.panel {
  padding: 0 18px;
  background-color: white;
  font-family: poppins;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.title {
  font-family: Poppins;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accordions</title>
    <link rel="stylesheet" href="style.css"></link>
</head>
<body>
    <h1 class="title">Accordions Test</h1>
    <button class="accordion">Accordion 1</button>
    <div class="panel">
        <button class="subaccordion">Subaccordion 1</button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>
    </div>

    <button class="accordion">Accordion 2</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </div>
</body>
<script src="script.js" charset="utf-8"></script>
</html>

Answer 1

当您点击子手风琴时，来自 maxHeight 的问题仍然影响到父节点

一个想法可以是等待面板上的过渡结束以重新计算父级上的 maxHeight

panel.addEventListener('transitionend', () => {
    panel.parentNode.style.maxHeight = panel.parentNode.scrollHeight + "px";
});

[...document.querySelectorAll('.accordion, .subaccordion')].forEach(acc => {
  acc.addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
});

[...document.querySelectorAll('.panel')].forEach(panel => {
  panel.addEventListener('transitionend', () => {
    panel.parentNode.style.maxHeight = panel.parentNode.scrollHeight + "px";
  });
});

.accordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Poppins;
  font-size: 15px;
  transition: 0.4s;
  margin-top: .15rem;
  background-color: #fafafa;
}

.subaccordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Poppins;
  font-size: 15px;
  transition: 0.4s;
  margin-top: .15rem;
  background-color: #fafafa;
}

.active,
.accordion:hover,
.subaccordion:hover {
  background-color: #f0f0f0;
}

.accordion:after,
.subaccordion:after {
  content: '[=12=]2B';
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "12";
}

.panel {
  padding: 0 18px;
  background-color: white;
  font-family: poppins;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.title {
  font-family: Poppins;
}

<h1 class="title">Accordions Test</h1>
<button class="accordion">Accordion 1</button>
<div class="panel">
  <button class="subaccordion">Subaccordion 1</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
</div>

<button class="accordion">Accordion 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>

Html 子手风琴打不开

Html Sub-Accordions don't open

html

javascript

css

accordion