手风琴动画不适用于子元素

问题描述

我正在为我的网站制作动画手风琴。 我的手风琴的第二层没有动画，不可见。

它只发生在我手风琴的第二层。

此动画来自 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 (将#修改为@）