如何解决第一个元素已经被点击
基于此 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"></>
并且每次都在它们之间切换。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。