Hur skapa: Fäll effekt

Lär dig hur du skapar en fällbar del.

Fällbar effekt

Klicka på denna knapp för att växla mellan att visa och dölja fällbart innehåll.

Något fällbart innehåll. Klicka på knappen för att växla mellan att visa och dölja fällbart 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.

Prova själv

Skapa en fällbar effekt

Steg 1 - Lägg till HTML:

<knapp type="button" class="fällbar">Öppna Fällbar</knapp>
<div class="innehåll">
  <p>Lorem ipsum...</p>
</div>

Steg 2 - Lägg till CSS:

Ställ in Accordion-stil:

/* Ställ in stilen för knappen som används för att öppna och stänga fällbart innehåll */
.fällbar {
  bakgrundsfärg: #eee;
  färg: #444;
  muspekare: pekare;
  mattning: 18px;
  bredd: 100%;
  kanter: inget;
  text-align: vänster;
  omrids: inget;
  teckensnittsstorlek: 15px;
}
/* När knappen klickas och när du flyttar muspekaren över knappen (hover), lägg till bakgrundsfärg till knappen (lägg till .aktiv klass med JS) */
.aktiv, .fällbar:hover {
  bakgrundsfärg: #ccc;
}
/* Ställ in stilen för fällbar innehåll. Observera: standard är dold */
.content {
  padding: 0 18px;
  visa: inte synlig;
  overflow: hidden;
  bakgrundsfärg: #f1f1f1;
}

Steg 3 - Lägg till JavaScript:

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;
    om (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Prova själv

animerad fällbar effekt (svep ner)

För att skapa en animerad fällbar effekt, lägg till max-height: 0、overflow: hide och max-height egenskaper till panelklassen.

Därefter, använd JavaScript för att lägga till övergång genom att sätta beräknade max-height Svep innehållet ner, beroende på panelens höjd på olika skärmdimensioner:

Exempel

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

Prova själv

Lägg till ikon

Lägg till ett tecken för varje knapp för att indikera om den fällbara innehållet är öppet eller stängt:

Exempel

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

Prova själv