Question

有点卡在这里..

所以我有这些按钮手风琴，我将填写内容，但现在这样做。当我启动并运行功能时，面板将充满内容。第一个手风琴按下按钮 EXCEPT 时，所有面板都会显示。我检查了控制台并发现了这个错误：＆＃34;无法读取属性＆＃39; classList＆＃39; of null＆＃34; 。关于该怎么做的任何想法？试图以某种方式改变剧本，但似乎没有奏效。

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

有什么建议吗？

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

＆＃13;

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {

    this.nextElementSibling.classList.toggle("show");
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

无法读取属性＆＃39; classList＆＃39; null和覆盖

1 个答案: