如何解决手风琴动画不适用于子元素
我正在为我的网站制作动画手风琴。 我的手风琴的第二层没有动画,不可见。
它只发生在我手风琴的第二层。
此动画来自 W3school https://www.w3schools.com/howto/howto_js_accordion.asp
这是我的代码:
var acc = document.getElementsByClassName("click");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click",function() {
/* Toggle between adding and removing the "active" class,to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
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";
}
});
}
/* logo - Homepage */
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* Post Menu - Homepage */
.container-1 {
display: block;
margin: 30px auto;
width: 78%;
border: 0px solid #00000052;
Box-shadow: 0px 0px 20px 5px rgba(0,0.198);
}
.accordion {
display: block;
margin-left:auto;
margin-right: auto;
background-color: #052650;
color: #CDD8E2;
font-size: 25px;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: 1px solid #00000052;
border-radius: 20px;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS),and when you move the mouse over it (hover) */
.active,.hover:hover {
background-color: #063064;
}
.accordion-sub {
display: block;
margin-left:auto;
margin-right: auto;
background-color: #083A79;
color: #CDD8E2;
font-size: 25px;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: 1px solid #00000052;
border-radius: 20px;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS),.accordion-sub:hover {
background-color: #0A4DA1;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
display: none;
overflow: hidden;
transition: max-height 0.5s ease-out;
max-height: 0;
}
.Box {
padding: 18px 18px;
background-color: #04233C;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.thumbnail {
flex: 20%;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 20px;
margin: 10px 10px;
transition: 0.5s;
}
.thumbnail h3 {color: #F69578;}
.thumbnail img {
width: 300px;
}
.thumbnail:hover {
transform: scaleX(1.06) scaleY(1.06);
}
<div class="container-1">
<button class="accordion hover click">Podróżowanie</button>
<div class="accordion panel">
<button class="accordion-sub click" id="slide-down">Nad wodę</button>
<div class="panel Box">
<div class="grid">
<div class="thumbnail">
<a href="index.html">
<img src="/Posts/Dziura w lodzie/thumb.jpg">
<h3>Dziura w lodzie</h3>
<p>Nigdy wcześniej nie wykułam tak równej dziury,niesamowite przeżycie. Polecam każdemu książkę "równe kucie mamucie!"</p>
</a>
</div>
<div class="thumbnail">
<img src="/Posts/Dziura w lodzie/thumb.jpg">
<h3>Dziura w lodzie</h3>
<p>Nigdy wcześniej nie wykułam tak równej dziury,niesamowite przeżycie. Polecam każdemu książkę "równe kucie mamucie!"</p>
</div>
<div class="thumbnail">
<img src="/Posts/Dziura w lodzie/thumb.jpg">
<h3>Dziura w lodzie</h3>
<p>Nigdy wcześniej nie wykułam tak równej dziury,niesamowite przeżycie. Polecam każdemu książkę "równe kucie mamucie!"</p>
</div>
</div>
</div>
<button class="accordion-sub click">W góry</button>
<div class="panel Box">
<p>UGABUGABUAAGGAGAGAGGAGAG</p>
</div>
</div>
</div>
非常感谢您的帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。