如何获取 HTML 嵌套手风琴

Question

我正在努力使用 HTML 来嵌套手风琴，请帮助解决这个问题。当我放置内部手风琴时，它没有显示内容。我需要它而不使用任何引导代码。我浏览了很多网站，找到了一种在 HTML 中添加嵌套手风琴的方法，请任何人研究一下这个问题var acc = document.getElementsByClassName("accordion");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 {  background-color: #eee;  color: #444;  cursor: pointer;  padding: 18px;  width: 100%;  border: none;  text-align: left;  outline: none;  font-size: 15px;  transition: 0.4s;}.active, .accordion:hover {  background-color: #ccc;}.accordion:after {  content: '\002B';  color: #777;  font-weight: bold;  float: right;  margin-left: 5px;}.active:after {  content: "\2212";}.panel {  padding: 0 18px;  background-color: white;  max-height: 0;  overflow: hidden;  transition: max-height 0.2s ease-out;}<h2>Accordion with symbols</h2><p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p><button class="accordion">Section 1</button><div class="panel">  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>  <button class="accordion">Section 1</button><div class="panel">  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p></div></div>

Answer 1

您的代码的问题在于， 被max-height设置为打开手风琴时子元素的总高度，并且在打开嵌套手风琴时子元素高度发生变化时不会更新。添加超时功能设置max-heighttounset修复了问题（设置max-heightto直接禁用了对其unset应用的能力）transition:max-height

var acc = document.getElementsByClassName("accordion");

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 = panel.scrollHeight + "px";

      setTimeout(function(){panel.style.maxHeight = null;}, 50)

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

      setTimeout(function(){panel.style.maxHeight = "unset";}, 200)

    } 

  });

}

.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}

.active, .accordion:hover {

  background-color: #ccc;

}

.accordion:after {

  content: '\002B';

  color: #777;

  font-weight: bold;

  float: right;

  margin-left: 5px;

}

.active:after {

  content: "\2212";

}

.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<h2>Accordion with symbols</h2>

<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>

<button class="accordion">Section 1</button>

<div class="panel">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

  

<button class="accordion">Section 1</button>

<div class="panel">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

</div>

</div>

Answer 2

面板元素 css propsmax-height低计数高度。

推荐使用display属性来控制元素的显示。

var acc = document.getElementsByClassName("accordion");

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.display == "block") {

      panel.style.display = "none";

    } else {

      panel.style.display = "block";

    } 

  });

}

.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}

.active, .accordion:hover {

  background-color: #ccc;

}

.accordion:after {

  content: '\002B';

  color: #777;

  font-weight: bold;

  float: right;

  margin-left: 5px;

}

.active:after {

  content: "\2212";

}

.panel {

  padding: 0 18px;

  background-color: white;

  display: none;

  /* max-height: 0; */

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<h2>Accordion with symbols</h2>

<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>

<button class="accordion">Section 1</button>

<div class="panel">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

  

<button class="accordion">Section 1</button>

<div class="panel">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

</div>

</div>