javascript - 我的 Accordion 菜单代码有问题吗？

Question

我正在尝试制作一个滑动 Accordion 菜单，但是当我单击旨在触发它的按钮时，什么也没有发生。

这是我的代码...

此外，如果我的代码总体上很草率，我深表歉意，我对此很陌生，并且非常愿意接受更好实践的建议!

提前致谢。

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

.nav {
  padding: 18px;
  grid-column: 1/2;
  grid-row: 1/2;
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  font-size: 20px;
  color: black;
  text-decoration: none;
}

.nav a {
  transition: 0.4s;
}

.nav a:hover {
  color: #FFB52A;
  font-style: italic;
  padding: 10px;
  transition: 0.2s;
}

button {
  background: none!important;
  border: none;
  padding: 0!important;
  text-decoration: none;
  cursor: pointer;
}

.accordion {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  font-size: 20px;
  cursor: pointer;
  padding: 18px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  color: #FFB52A;
  font-style: italic;
  padding: 10px;
  transition: 0.2s;
}

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

<div class="nav">

  <h1>header</h1>

  <button class="accordion">music</button><br>
  <div class="panel">
    <a href="artists.html">artists</a><br>
    <a href="draw-and-listen.html">draw and listen</a><br>
  </div>

  <hr><br>

  <button class="accordion">visual</button><br>
  <div class="panel">
    <a href="work.html">work</a><br>
  </div>

  <hr><br>

  <a href="store.html">store</a><br>
  <a href="about.html">about</a>

</div>

Answer 1

在您的代码中，您正在寻找要显示/隐藏的按钮后面的元素，但这是一个 <br>不是<div>与内容。
在下面的示例中，我只是删除了 <br>

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

.nav {
  padding: 18px;
  grid-column: 1/2;
  grid-row: 1/2;
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  font-size: 20px;
  color: black;
  text-decoration: none;
}

.nav a {
  transition: 0.4s;
}

.nav a:hover {
  color: #FFB52A;
  font-style: italic;
  padding: 10px;
  transition: 0.2s;
}

button {
  background: none!important;
  border: none;
  padding: 0!important;
  text-decoration: none;
  cursor: pointer;
}

.accordion {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  font-size: 20px;
  cursor: pointer;
  padding: 18px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  color: #FFB52A;
  font-style: italic;
  padding: 10px;
  transition: 0.2s;
}

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

<div class="nav">

  <h1>header</h1>

  <button class="accordion">music</button>
  <div class="panel">
    <a href="artists.html">artists</a><br>
    <a href="draw-and-listen.html">draw and listen</a><br>
  </div>

  <hr><br>

  <button class="accordion">visual</button>
  <div class="panel">
    <a href="work.html">work</a><br>
  </div>

  <hr><br>

  <a href="store.html">store</a><br>
  <a href="about.html">about</a>

</div>