javascript - 无法读取 null 和覆盖的属性 'classList'

Question

有点卡在这里..

所以我有这些按钮 Accordion ，我要用内容填充它们，但现在就可以了。当我启动并运行这些功能时，面板将充满内容。当按下第一个 Accordion 的按钮 EXCEPT 时，所有面板都会显示。我检查了控制台并发现了这个错误:“无法读取 null 的属性‘classList’”。关于做什么的任何想法？试图以某种方式更改脚本，但似乎没有用。

我似乎无法工作的另一件事是我的面板覆盖。每当按下按钮时，我希望我的面板覆盖覆盖页面上的其余内容。该按钮应该处于事件状态，以便它可以返回到其原始主题。我试图用一些“z-index”来修复它，但似乎没有什么 react 。我还有一个脚本，我试图让容器中的按钮处于事件状态但没有成功。

有什么建议吗？

到目前为止，这是我的代码:

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

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {

    this.nextElementSibling.classList.toggle("show");
  }
}

html,
body {
  width: 80%;
  margin: 0 auto;
}

head {
  text-align: left;
}

.container {
  width: 100%;
  margin: 0 auto;
}

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;
  margin-top: 2%;
}

button h3 {
  text-align: center;
}

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

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

div.panel.show {
  opacity: 1;
  max-height: 700px;
}

.container div.active {
  height: 100%;
  margin-top: 10%;
  margin-bottom: 5%;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  transition-duration: 1s;
  align-items: center;
}

@media only screen and (max-width: 500px) {
  .container {
    width: 100%;
    margin: 0 auto;
  }
  button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 7px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin: 2%;
  }
  button.accordion.active,
  button.accordion:hover {
    background-color: #ddd;
  }
  div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
  }
  div.panel.show {
    opacity: 1;
    max-height: 700px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <button class="accordion"><h3>Random 1</h3></div></button>

  <div class="panel">

    <h1> hej </h1>

  </div>

  <button class="accordion"><h3>Random 2</h3></div></button>

  <div class="panel">

    <h1> hej </h1>

  </div>

  <button class="accordion"><h3>Random 3</h3></div></button>

  <div class="panel">

    <h1> hej </h1>

  </div>

  <button class="accordion"><h3>Random 4</h3></div></button>

  <div class="panel">

    <h1> hej </h1>

  </div>

  <button class="accordion"><h3>Random 5</h3></div></button>

  <div class="panel">

    <h1> hej </h1>

  </div>

</div>

Answer 1

在我这边工作正常，你只需要更正你在按钮声明上的标记。有多余的关闭 div </div> .

<div class="container">

  <button class="accordion"><h3>Random 1</h3>     </button>

   <div class="panel">

     <h1> hej </h1>

   </div>

   <button class="accordion"><h3>Random 2</h3>  </button>

   <div class="panel">

   <h1> hej </h1>

   </div>

   <button class="accordion"><h3>Random 3</h3>  </button>

   <div class="panel">

   <h1> hej </h1>

   </div>

   <button class="accordion"><h3>Random 4</h3>  </button>

   <div class="panel">

   <h1> hej </h1>

   </div>

   <button class="accordion"><h3>Random 5</h3>  </button>

   <div class="panel">

   <h1> hej </h1>

   </div>

 </div>