Accordion內的手風琴

我試圖將嵌入式手風琴放入另一個手風琴中，但它不起作用，嵌入式手風琴將只擴展到第一個展開式手風琴的尺寸，我將需要添加額外的空間以顯示內容，任何非常感謝幫助！Accordion內的手風琴

CSS

button.accordion { 
background-color: #73560b; 
border: 2px solid #ffc600; 
border-radius: 0px 10px 0px 10px; 
box-shadow: 7px 7px 5px #cccccc; 
color: #fff; 
cursor: pointer; 
padding: 10px 15px 10px 15px; 
margin: 4px 0px 7px 0px; 
width: 100%; 
font-size: 18px; 
transition: 0.4s; 
outline: none; 
text-align: left; 
} 
button.accordion.active, button.accordion:hover { 
background-color: #926c0e; 
} 

button.accordion:after { 
content: '\002B'; 
color: #ffc600; 
font-weight: bold; 
float: right; 
} 

button.accordion.active:after { 
content: "\2212"; 
} 

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

HTML

<button class="accordion">Background</button> 
<div class="panel"> 
content 
<button class="accordion">item 1</button> 
<div class="panel"> 
content 
</div> 
</div>

的JavaScript

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

for (i = 0; i < acc.length; i++) { 
acc[i].onclick = function() { 
this.classList.toggle("active"); 
var panel = this.nextElementSibling; 
if (panel.style.maxHeight){ 
    panel.style.maxHeight = null; 
} else { 
    panel.style.maxHeight = panel.scrollHeight + "px"; 
} 
} 
}

來源

2017-07-28 nsic

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

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
     this.classList.toggle("active"); 
 
     var panel = this.nextElementSibling; 
 
     if (panel.style.display === "block") { 
 
      panel.style.display = "none"; 
 
     } else { 
 
      panel.style.display = "block"; 
 
     } 
 
    } 
 
}

button.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; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-color: #ddd; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    display: none; 
 
    background-color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<h2>Accordion</h2> 
 

 

 

 
<button class="accordion">Section 2</button> 
 
<div class="panel"> 
 
    <button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
<p> 
 
content 
 
</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> 
 
</div> 
 

 

 
</body> 
 
</html>

試試這個

來源

2017-07-28 05:33:25 Jok3r

好工作，非常感謝 – nsic

Accordion內的手風琴

回答

相關問題