Question

我在网上发布了这支手风琴

https://www.w3schools.com/howto/howto_js_accordion.asp

如何配置一开始就打开的手风琴？

使用Javascript：

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

Answer 1

添加

ACC [0]。点击（）;

在脚本的末尾

<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";
    } 
  }
}
acc[0].click();
</script>

Answer 2

您需要将.active课程.accordion添加到要保持开放的子元素style="display:block" {/ 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.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}

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;
    display: none;
    background-color: white;
}

Answer 3

如果我理解了这个问题，请尝试选择第一个（或其他）元素并将其显示设置为＆＃34; block＆＃34;加载文档时：

acc[0].nextElementSibling.style.display = "block"

Answer 4

您可以使用JavaScript在第一个元素上设置属性el.nextElementSibling.style.display = 'block'：

＆＃13;

document.querySelectorAll('.accordion').forEach(function(el, index) {
  // Add event listener to all elements
  el.addEventListener('click', function() {
    el.classList.toggle('active');
    el.nextElementSibling.style.display = el.nextElementSibling.style.display === 'block'
      ? 'none'
      : 'block';
  });
  
  // First element open
  0 === index && (el.nextElementSibling.style.display = 'block');
});

＆＃13;

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;
  display: none;
  background-color: white;
}

＆＃13;

<h2>Accordion</h2>

<button class="accordion active" >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>

＆＃13;

用Javascript打开手风琴

4 个答案: