JavaScript手风琴帮助切换第一个元素有效

Question

请求快速帮助。为我的手风琴得到了这个JS。这是现在完整的脚本。 QN：如何修改JS以使我的第一个面板元素在加载页面时处于活动状态或展开状态，但在点击时切换（因为它已经存在）？

在此先感谢。

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>

希望脚本现在可以运行。

Answer 1

我希望它会帮助你在这里，我只是触发第一手风琴的点击功能

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>

Answer 2

您可以使用下面的代码，当您加载或你的手风琴菜单后创建

var acc = document.getElementsByClassName("accordion"); 
acc[0].classList.toggle("active");