手风琴菜单：如何在开始时全部打开

Question

我已经开始制作手风琴菜单，html：

<button class="accordion">New Attendees</button>
<div class="panel">
    <p>How do I get started?</p>
    <p>I'm stuck! Where can I get help?</p>
 </div>
 <button class="accordion">Instrument Simulations</button>
 <div class="panel">
    <p>What are some tools I can use?</p>
    <p>How can I obtain an estimate?</p>
</div>

用css：

.accordion:after {
    content: "\002B";
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.accordion:hover {
    background-color: #333;
    color: white;
}

.active {
    background-color: #333;
    color: white;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 18px;
    background-color: white;
    display: none;
    transition: 0.2s ease-out;
}

我用javascript来赋予它功能：

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

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}
</script>

现在，所有手风琴都在页面加载时折叠，但我希望它们默认打开。什么是默认打开它们的好方法？我以为我可以将css切换到.panel（display：block;}但是这似乎把所有其他东西都弄得太乱了。想法呢？

Answer 1

Javascript适用于元素本身，因此应该在html上应用style属性，并将其插入到css文件中。这就是为什么它搞乱了。

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

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}

.accordion:after {
    content: "\002B";
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.accordion:hover {
    background-color: #333;
    color: white;
}

.active {
    background-color: #333;
    color: white;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 18px;
    background-color: white;
    display: none;
    transition: 0.2s ease-out;
}

<button class="accordion active">New Attendees</button>
<div class="panel" style="display:block;">
    <p>How do I get started?</p>
    <p>I'm stuck! Where can I get help?</p>
 </div>
 <button class="accordion active">Instrument Simulations</button>
 <div class="panel" style="display:block;">
    <p>What are some tools I can use?</p>
    <p>How can I obtain an estimate?</p>
</div>

Answer 2

将切换放入一个函数中，并在脚本部分的末尾为每个手风琴调用它。您可以通过将一个按钮和一个面板放在一个div容器中来避免切换布局。然后将float: left应用于所有容器。看起来应该是这样的：

function toggle(acc) {
  /* Toggle between adding and removing the "active" class,
      to highlight the button that controls the panel */
  acc.classList.toggle("active");

  /* Toggle between hiding and showing the active panel */
  var panel = acc.nextElementSibling;
  if (panel.style.display === "block") {
    panel.style.display = "none";
  } else {
    panel.style.display = "block";
  }
}

// This is called when document is loaded, it toggles all accordions
function toggleAll() {
  var accs = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < accs.length; i++) {
    toggle(accs[i]);
  }
}

var accs = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < accs.length; i++) {
  accs[i].onclick = function() {
    toggle(this); // Use toggle function
  }
}
toggleAll();

.accordion:after {
  content: "\002B";
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion:hover {
  background-color: #333;
  color: white;
}

.active {
  background-color: #333;
  color: white;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 18px;
  background-color: white;
  display: none;
  transition: 0.2s ease-out;
}

.container {
  /* Floating the container will also float its content*/
  float: left;
}

</style>

<!-- A wrapper around your accordions -->
<div class="container">
  <button class="accordion">New Attendees</button>
  <div class="panel">
    <p>How do I get started?</p>
    <p>I'm stuck! Where can I get help?</p>
  </div>
</div>

<div class="container">
  <button class="accordion">Instrument Simulations</button>
  <div class="panel">
    <p>What are some tools I can use?</p>
    <p>How can I obtain an estimate?</p>
  </div>
</div>

我希望我能帮助你。