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 ati@aticourses.com.</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();