JavaScript手风琴帮助切换第一个元素有效
问题描述:
请求快速帮助。为我的手风琴得到了这个JS。这是现在完整的脚本。 QN:如何修改JS以使我的第一个面板元素在加载页面时处于活动状态或展开状态,但在点击时切换(因为它已经存在)?JavaScript手风琴帮助切换第一个元素有效
在此先感谢。
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
.panel {overflow:hidden;max-height:0}
<button class="accordion">Section 1</button>
<div class="panel">My Content 1</div>
<button class="accordion">Section 2</button>
<div class="panel">My Content 2</div>
希望脚本现在可以运行。
答
我希望它会帮助你在这里,我只是触发第一手风琴的点击功能
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
acc[0].click();
.panel {overflow:hidden;max-height:0}
<button class="accordion">Section 1</button>
<div class="panel">My Content 1</div>
<button class="accordion">Section 2</button>
<div class="panel">My Content 2</div>
答
您可以使用下面的代码,当您加载或你的手风琴菜单后创建
var acc = document.getElementsByClassName("accordion");
acc[0].classList.toggle("active");
+0
显然,要显示的内容是在每个手风琴菜单的nextElementSibling中。需要更多的线。我已经添加了一个片段。 – Mwesigwa
可你能够把它摘录 –
我添加了一个@KalaiselvanA – Mwesigwa
可以至三gger'acc [0] .click();'这 –