为什么单击我的手风琴时不显示子选项卡？

Question

我正在尝试创建一个 FAQ 手风琴，但不幸的是，当其中一个选项卡打开时，只有 space，并且没有显示任何内容。这是我正在使用的 html、CSS 和 JavaScript。任何帮助将不胜感激。

var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var setClasses = !this.classList.contains('active');
    setClass(acc, 'active', 'remove');
    setClass(panel, 'show', 'remove');

    if (setClasses) {
      this.classList.toggle("active");
      this.nextElementSibling.classList.toggle("show");
    }
  }
}

function setClass(els, className, fnName) {
  for (var i = 0; i < els.length; i++) {
    els[i].classList[fnName](className);
  }
}

.master-accordion {
  color: #141452;
  width: 100%;
  height: 80%;
  padding: 0 0 0 8em;
  position: relative;
  z-index: 99;
  align-items: center;
  opacity: .9;
}

.accordion {
  color: #141452;
  font-weight: bold;
  cursor: pointer;
  padding: 18px;
  width: 90%;
  opacity: .95;
  text-align: left;
  border: 1px solid black;
  transition: 0.4s;
  font-family: 'Roboto', sans-serif;
  z-index: 99;
}

.panel {
  background-color: white;
  display: none;
  overflow: hidden;
  width: 90%;
  max-height: 0;
  transition: max-height 0.2s ease-out;
  position: relative;
  z-index: 99;
  font: 16px;
  background-color: white;
  padding: 10px 0 0 0;
}

.active,
.accordion:hover {
  background-color: #141452;
  color: white;
}

.accordion::after {
  content: '795';
  font-size: 15px;
  float: right;
  margin-left: 5px;
}

.active::after {
  content: '96'
}

.accordion.active {
  margin-bottom: 20px;
}

<div class="master-accordion">

  <button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
  <div class="panel">
    If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
  </div>

  <button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
  <div class="panel">
    No, unfortunately not at this time
  </div>

  <button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
  <div class="panel">
    Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
  </div>

</div>

当我点击按钮时，它们会打开，但当它们打开时，会出现死space，很可能是因为我在上面放置的保证金。我的 JavaScript 的总体功能有效，但我无法看到让我相信这是一个 CSS 问题的文本。

Answer 1

您尚未为 show class 设置任何属性。我删除了 display:none 并为 show class 设置了 max-height:150px。

var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var setClasses = !this.classList.contains('active');
    setClass(acc, 'active', 'remove');
    setClass(panel, 'show', 'remove');

    if (setClasses) {
      this.classList.toggle("active");
      this.nextElementSibling.classList.toggle("show");
    }
  }
}

function setClass(els, className, fnName) {
  for (var i = 0; i < els.length; i++) {
    els[i].classList[fnName](className);
  }
}

.master-accordion {
  color: #141452;
  width: 100%;
  height: 80%;
  padding: 0 0 0 8em;
  position: relative;
  z-index: 99;
  align-items: center;
  opacity: .9;
}

.accordion {
  color: #141452;
  font-weight: bold;
  cursor: pointer;
  padding: 18px;
  width: 90%;
  opacity: .95;
  text-align: left;
  border: 1px solid black;
  transition: 0.4s;
  font-family: 'Roboto', sans-serif;
  z-index: 99;
}

.panel {
  background-color: white;
  overflow: hidden;
  width: 90%;
  max-height: 0;
  transition: max-height 0.2s ease-out;
  position: relative;
  z-index: 99;
  font: 16px;
  background-color: white;
  padding: 10px 0 0 0;
}

.panel.show{
max-height: 150px;
}

.active,
.accordion:hover {
  background-color: #141452;
  color: white;
}

.accordion::after {
  content: '795';
  font-size: 15px;
  float: right;
  margin-left: 5px;
}

.active::after {
  content: '96'
}

.accordion.active {
  margin-bottom: 20px;
}

<div class="master-accordion">

  <button class="accordion">HOW DO I CANCEL MY RENTED SPACE?</button>
  <div class="panel">
    If you wish to cancel your space, simply use the email contact form below to send us an email with your intent to cancel. We require 7 days notice before the end of the month in order to not be charged for an additional months rent.
  </div>

  <button class="accordion">DO YOU HAVE ANY COVERED PARKING SPACES?</button>
  <div class="panel">
    No, unfortunately not at this time
  </div>

  <button class="accordion">ARE THERE ANY DISCOUNTS FOR LONG TERM RENTING?</button>
  <div class="panel">
    Yes, you can signup and pay for a year ahead of time and receive the first month free. We are happy to discuss any longer terms, if you would like.
  </div>

</div>

为什么单击我的手风琴时不显示子选项卡？

Why is my accordion not showing the sub tabs when it is clicked on?

html

javascript

css

accordion