Hur skapa: Fällbar innehåll/Foldern

Lär dig hur du skapar en handakustik (fällbart innehåll).

Handakustik

Handakustik är mycket användbar när du vill växla mellan att dölja och visa mycket innehåll:

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.

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.

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.

Prova själv

Skapa akustik

Steg 1 - Lägg till HTML:

<button class="accordion">Avsnitt 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Avsnitt 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Avsnitt 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Steg 2 - Lägg till CSS:

Ställ in akustikens stil

/* Ställ in stil för knappen som används för att öppna och stänga akustikpanelen */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Om knappen klickas (lägg till .active-klassen med JavaScript), lägg till bakgrundsfärg samt när muspekaren är över den (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Lägg till stil för akustikpanel.Observera: Det är standard att det är dolt */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Steg 3 - Lägg till JavaScript:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Byta mellan att lägga till och ta bort "active"-klassen för att markera kontrollpanelens knappar */
    this.classList.toggle("active");
    /* Byta mellan dölja och visa aktiv panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Prova själv

Animerad accorder (rullar ner)

För att skapa en animerad accorder, lägg till: max-height: 0、overflow: hidden och max-height 过渡效果。

Därefter, använd JavaScript för att beräkna och ställa in panelhöjden baserat på olika skärmskikt: max-heightFör att uppnå en effekt med innehållet som rullar ner, lägg till:

<style>
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", 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>

Prova själv

Lägg till ikon

Lägg till ett tecken på varje knapp för att indikera om den klickbara innehållet är öppnat eller stängd:

.accordion:after {
  content: '\02795'; /* “加号”（+）的 Unicode 字符 */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* “减号”（-）的 Unicode 字符 */
}

Prova själv