HTML Accoridion Panel默认打开？

Question

我在W3 Schools网站上看到了这个动画手风琴菜单，我真的很喜欢它，但它似乎没有任何关于如何保持特定部分打开并默认为“活动”的任何细节。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate

我试图改变类的按钮“活动”的但做了一些似乎工作，它不仅改变了“+”到“ - ”号不显示菜单。

任何人都可以建议吗？

<div id="accordion_menu"> 
        <button class="accordion">What You Will Learn</button> 
         <div class="panel scrolled"> 
          <ul> 
           <li>Fundamental algorithms for signal processing.</li> 
           <li>Techniques for beam forming.</li> 
           <li>Trade-offs among active waveform designs.</li> 
           <li>Ocean medium effects.</li> 
           <li>Shallow water effects and issues</li> 
           <li>Optimal and adaptive processing</li> 
          </ul> 
         </div> 

        <button class="accordion">Course Outline</button> 
         <div class="panel"> 
          <ol> 
           <li> 
            <p><em>Introduction to Sonar Signal Processing.</em> Introduction to sonar detection systems and types of signal processing performed in sonar. Correlation processing, Fournier analysis, windowing, and ambiguity functions. Evaluation of probability of detection and false alarm rate for FFT and broadband signal processors. </p>  
           </li> 

           <li> 
            <p><em>Beamforming and Array Processing.</em> Beam patterns for sonar arrays, shading techniques for sidelobe control, beamformer implementation. Calculation of DI and array gain in directional noise fields. </p> 
           </li> 

           <li> 
            <p><em>Passive Sonar Signal Processing.</em> Review of signal characteristics, ambient noise, and platform noise. Passive system configurations and implementations. Spectral analysis and integration. </p> 
           </li> 

           <li> 
            <p><em>Active Sonar Signal Processing.</em> Waveform selection and ambiguity functions. Projector configurations. Reverberation and multipath effects. Receiver design. </p> 
           </li> 

           <li> 
            <p><em>Passive and Active Designs and Implementations.</em>Advanced techniques for beamforming, detection, estimation, and classification will be explored. Optimal array processing. Data adaptive methods, super resolution spectral techniques, time-frequency representations and active/passive automated classification are among the advanced techniques that will be covered.</p> 
           </li> 
           <li> 
            <p><em>Advanced Signal Processing Techniques.</em>Advanced techniques for beamforming, detection, estimation, and classification will be explored. Optimal array processing. Data adaptive methods, super resolution spectral techniques, time-frequency representations and active/passive automated classification are among the advanced techniques that will be covered. </p> 
           </li> 



          </ol> 

         </div> 


        <button class="accordion">Tuition</button> 
         <div class="panel"> 
          <p>Tuition for this three-day course is $1890 per person at one of our scheduled public courses. Onsite pricing is available. Please call us at 410-956-8805 or send an email to [email protected]</p> 

          <p><a href="https://www.aticourses.com/beta_mobile/register_secure.html">Register Now Without Obligation.</a></p> 
         </div> 
       </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"; 
    } 
    } 
} 

要这样：

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

// New code to open the first section by default 
if(acc.length > 0) { 
    acc[0].classList.add("active"); 
    acc[0].nextElementSibling.style.maxHeight = acc[0].nextElementSibling.scrollHeight + "px"; 
} 

如果您不想在默认情况下打开第一部分，则可以将0更改为您选择的索引。

Here is a codepen showing it working。

Answer 2

<script> 
var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].classList.toggle("active"); 
    var panel = acc[i].nextElementSibling; 
    panel.style.maxHeight = panel.scrollHeight + "px"; 
} 
</script> 

Answer 3

您可以手动触发click事件

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    button.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; 
 
    } 
 
    
 
    button.accordion.active, button.accordion:hover { 
 
     background-color: #ddd; 
 
    } 
 
    
 
    div.panel { 
 
     padding: 0 18px; 
 
     background-color: white; 
 
     max-height: 0; 
 
     overflow: hidden; 
 
     transition: max-height 0.2s ease-out; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <h2>Animated Accordion</h2> 
 
    <p>Click on the buttons to open the collapsible content.</p> 
 

 
    <button class="accordion">Section 1</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 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> 
 

 
    <script> 
 
    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"; 
 
     } 
 
     } 
 
    } 
 
     
 
    /* open second panel by default */ 
 
    acc[1].click(); 
 
    
 
    </script> 
 

 
</body> 
 

 
</html>

Answer 4

可以在

acc[1].click(); 

只需添加到脚本的末尾。您可以更改索引以打开默认打开的部分。

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[1].click();