Sådan oprettes: Sammenrulningseffekt

Lær hvordan du opretter en sammenrullbar del.

Foldbar effekt

Klik på denne knap for at skifte mellem at vise og skjule det foldbare indhold.

Nogle foldbare indhold. Klik på knappen for at skifte mellem at vise og skjule det foldbare indhold. 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.

Prøv det selv

Opret en foldbar effekt

Første trin - Tilføj HTML:

<knapp type="button" class="kollapsible">Åbn Kollapsible</knapp>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Andet trin - Tilføj CSS:

Indstil akkordeon-stil:

/* Indstil stilen for knappen, der bruges til at åbne og lukke foldbart indhold */
.kollapsible {
  baggrundsfarve: #eee;
  farve: #444;
  markør: pegefinger;
  marginal: 18px;
  bredde: 100%;
  kant: ingen;
  tekstjustering: venstre;
  kantlinje: ingen;
  font-størrelse: 15px;
}
/* Tilføj baggrundsfarve til knappen, når den klikkes, og når du flytter musen over den (hover) */
.aktiv, .kollapsible:hover {
  baggrundsfarve: #ccc;
}
/* Indstil stilen for foldbar indhold. Bemærk: Standard er skjult */
.content {
  padding: 0 18px;
  vis: none;
  overflow: hidden;
  baggrundsfarve: #f1f1f1;
}

Tredje trin - Tilføj 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;
    hvis (content.style.display === "block") {
      content.style.display = "none";
    } ellers {
      content.style.display = "block";
    }
  });
}

Prøv det selv

animeret foldningseffekt ( glide nedad)

For at skabe en animeret foldningseffekt, tilføj max-height: 0、overflow: hide og max-height egenskaber til panelets klasse.

Dernæst, brug JavaScript til at tilføje overgangen ved at sætte beregnede max-height Så glid indholdet ned, afhængigt af panelets højde på forskellige skærmskalaer:

eksempel

<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;
    hvis (content.style.maxHeight){
      content.style.maxHeight = null;
    } ellers {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>

Prøv det selv

Tilføj ikon

Tilføj et symbol til hver knap for at indikere, om den foldbare indhold er åben eller lukket:

eksempel

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

Prøv det selv