第一个元素已经被点击

问题描述

基于此 https://www.w3schools.com/howto/howto_js_accordion.asp

默认情况下，我需要先点击第一个“第1部分”

谢谢

解决方法

tl：dr ：删除样式display: none。

您可以使用以下方法在CSS中创建另一个类：

.panelshow {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
}

然后像这样将panel的类设置为panel1：

<button class="accordion">Section 1</button>
<div class="panelshow">
  <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

结果：

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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

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

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

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
.panelshow{
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
}

<button class="accordion">Section 1</button>
<div class="panelshow">
  <p>Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

,

您可以像这样添加一个名为open的类：

Position:absolute;
Top:50%;
Left:50%;
Transform:translate(-50%,-50%);

然后您要打开的面板具有该类，例如：.open { display: block; }

还为第一个手风琴课提供了活动课，例如：<div class="panel open"></>

并且每次都在它们之间切换。