Question

我从W3学校网站上看到了这个动画手风琴菜单，我真的很喜欢它，但它似乎没有任何关于如何保持特定部分打开和＆＃34;活跃＆＃34;默认情况下。

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

我尝试将按钮的类更改为＆＃34; active＆＃34;但这似乎有些工作，它只改变了＆＃34; +＆＃34;到＆＃34; - ＆＃34;没有显示菜单的标志。

有人可以提供建议吗？

<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

您可以手动触发点击事件

＆＃13;

<!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>

＆＃13;

Answer 4

你可以加入

    <html>
    <head>
    <style>
    
    #1700, #1800, #1900, #today {
     color: Red;
     font-family:anton, sans-serif;
     font-size:38px;
     width: 73px;
    }
    
    #1800 {
     left: 414px;
     position: absolute;
     top: 7px;
      
    }
    </style>
    </head>
    <body>
    
    <img src="file:///Users/leonvladimirov/Desktop/PM.png" alt=“Menu” style="width: 835px; position: absolute; top: 113px; left: 289px; height: 60px;">
    
    <h2 id=“1700”>1700</h2> 
    <h2 id=“1800”>1800</h2> 
    <h2 id=“1900”>1900</h2> 
    <h2 id=“today”>today</h2>

到脚本的末尾。您可以更改索引以打开默认情况下要打开的部分。

acc[1].click();

HTML Accoridion Panel默认打开？

4 个答案: