Hoe te maken: vouweffect

Leren hoe je een vouwbaar deel maakt.

Vouweffect

Klik op deze knop om tussen het weergeven en verbergen van de vouwbare inhoud te wisselen.

Enkele vouwbare inhoud. Klik op de knop om tussen het tonen en verbergen van de vouwbare inhoud te wisselen. 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.

Probeer het zelf

Maak een vouwende deel effect aan

Eerste stap - Voeg HTML toe:

<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Tweede stap - Voeg CSS toe:

Stel de accordeonstijl in:

/* Stel de stijl in voor de knoppen die worden gebruikt om inschuimbare inhoud te openen en te sluiten */
.collapsible {
  achtergrondkleur: #eee;
  kleur: #444;
  cursor: pointer;
  uitlijning: 18px;
  breedte: 100%;
  rand: none;
  tekstuitlijning: links;
  rand: none;
  lettergrootte: 15px;
}
/* Voeg achtergrondkleur toe aan de knop wanneer deze wordt geklikt en wanneer je de muis erop zet (hover), gebruik JS om de .active klasse toe te voegen */
.active, .collapsible:hover {
  achtergrondkleur: #ccc;
}
/* Stel de stijl van inschuimbare inhoud in. Let op: standaard verborgen */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  achtergrondkleur: #f1f1f1;
}

Derde stap - Voeg JavaScript toe:

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Probeer het zelf

geanimeerde vouweffect (naar beneden schuiven)

Om een geanimeerde vouweffect te creëren, voeg toe max-height: 0、overflow: hide en max-height toe te voegen aan de paneelklasse.

Gebruik vervolgens JavaScript om de berekende max-height Sleep de inhoud naar beneden, afhankelijk van de hoogte van het paneel op verschillende schermformaten:

Voorbeeld

<style>
.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>

Probeer het zelf

Voeg pictogram toe

Voeg een symbool toe aan elke knop om aan te geven of het vouwbare inhoud open of gesloten is:

Voorbeeld

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

Probeer het zelf