Question

我一直在关注本指南：https://www.w3schools.com/howto/howto_js_accordion.asp制作手风琴，但我无法弄清楚如何在div元素中放入嵌套的手风琴。我尝试了以下内容，但嵌套的div元素不符合How To文章底部的JavaScript。

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
  <button class="accordion">Subsection 1</button>
  <div class="panel">
    <p>subsection text</p>
  </div>
</div>

文章底部的JavaScript：

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";
    }
  });
}

Answer 1

问题在于javascript。它确实：

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

但扩展时的scrollHeight不包括展开的子部分，因为它是隐藏的。如果您展开第1小节，然后折叠并重新打开第1节，您将看到它正常工作。如果您想解决这个问题，请在前面提到的行之后添加这些javascript行：

var parent = this.parentElement;
parent.style.maxHeight = parseInt(parent.style.maxHeight) + panel.scrollHeight + "px";

这将通过定位面板的父级并动态更改其syle的panel属性，根据子panel高度扩展父maxHeight。 / p>

小提琴：https://jsfiddle.net/bn3woc8L/18/

Answer 2

这很奇怪。我只是尝试过它并且有效。

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; 
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}

<h2>Accordion</h2>

<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>

<button class="accordion">Section 2</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">Subsection 2</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>

<button class="accordion">Section 3</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">Subsection 3</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>

如何使用HTML5 / CSS / Javascript制作嵌套手风琴？

2 个答案: