Wie man erstellt: Falteffekt

Lernen Sie, wie man faltbare Teile erstellt.

Einklappbare Effekt

Klicken Sie auf die Schaltfläche, um zwischen dem Anzeigen und Verbergen der einklappbaren Inhalte umzuschalten.

Einige einklappbare Inhalte. Klicken Sie auf die Schaltfläche, um zwischen dem Anzeigen und Verbergen der einklappbaren Inhalte umzuschalten. 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.

Try it yourself

Erstellen Sie das Einklappbare-Teile-Effekt

Erster Schritt - Fügen Sie HTML hinzu:

<button type="button" class="collapsible">Öffnen Sie das Einklappbare</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Zweiter Schritt - Fügen Sie CSS hinzu:

Stellen Sie den Akkordeon-Stil ein:

/* Legen Sie das Stil für die Schaltflächen zur Öffnung und Schließung des einklappbaren Inhalts fest */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Fügen Sie beim Klicken auf den Button und wenn Sie die Maus auf den Button bewegen (Wischen), eine Hintergrundfarbe für den Button hinzu (verwenden Sie JS, um die Klasse .active hinzuzufügen) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Legen Sie das Stil für das einklappbare Inhalt fest. Beachten Sie: Standardmäßig versteckt */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Dritter Schritt - Fügen Sie JavaScript hinzu:

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";
    }
  });
}

Try it yourself

animierte Falteffekt (Nach unten ziehen)

Um eine animierte Falteffekt zu erstellen, fügen Sie max-height: 0,overflow: hide und max-height Eigenschaft hinzuzufügen, indem Sie den Übergang zur Klasse hinzufügen.

Dann, verwenden Sie JavaScript, um die berechnete max-height Ziehen Sie den Inhalt nach unten, je nach Höhe des Panels auf verschiedenen Bildschirmgrößen:

Beispiel

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

Try it yourself

Symbol hinzufügen

Fügen Sie jedem Button ein Symbol hinzu, um anzuzeigen, ob das einklappbare Inhalt geöffnet oder geschlossen ist:

Beispiel

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

Try it yourself