代码之家 › 专栏 › 技术社区 › Cdhippen

如何使用HTML5/CSS/Javascript制作嵌套的手风琴?[已关闭]

html css javascript

Cdhippen · 技术社区 · 6 年前

我一直遵循这个指南: 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";
    }
  });
}

2 回复 | 直到 6 年前

philr 6 年前

问题出在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";

这将展开父级 panel 基于孩子 面板 通过定位面板的父级并动态更改 maxHeight 其syle的属性。

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

Manuel Otto 6 年前

真奇怪。我刚试过,效果不错。

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>