html - 第一个元素已经被点击
解决方案
tl:dr:删除样式display: none
。
您可以使用以下方法在 CSS 中创建另一个类:
.panelshow {
padding: 0 18px;
background-color: white;
overflow: hidden;
}
然后将类设置为 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, 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>
<button class="accordion">Section 2</button>
<div class="panel">
<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>
<button class="accordion">Section 3</button>
<div class="panel">
<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>
推荐阅读
- django - django 管理员在字段中有选择选项取决于其他字段中的值
- python - 替换列表的多个元素
- javascript - 用JS替换span的内容
- javascript - puppeteer page.evaluate 无法使用 args 公开函数
- mysql - Efficient way to get median in a unindexed table
- olap - 可以处理十进制类型的OLAP
- javascript - 根据倒数第二个时间戳(日期)过滤具有相同周期值的对象数组?
- numpy - 在另一个二维数组中查找 numpy 二维数组行的索引
- vue-i18n - vue-i18n-next (VUEJS3) 禁用控制台警告
- r - 通过 R 中每个组的加权平均值聚合数据