Jak tworzyć: efekt złożenia

Uczenie się, jak tworzyć składane sekcje.

Efekt można zwinąć

Kliknij ten przycisk, aby przełączać między wyświetlaniem i ukrywaniem zawartości można zwinąć.

Niektóra zawartość można zwinąć. Kliknij przycisk, aby przełączać między wyświetlaniem i ukrywaniem zawartości można zwinąć. 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.

Spróbuj sam

Tworzenie efektu można zwinąć

Krok 1 - Dodaj HTML:

<button type="button" class="collapsible">Otwórz Akordeon</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Krok 2 - Dodaj CSS:

Ustawienia stylu akordeonu:

/* Ustawienia stylu dla przycisku otwierającego i zamykającego zawartość można zwinąć */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Dodaj kolor tła do przycisku, gdy jest klikany oraz gdy mysz jest nad przyciskiem (hover), używając JS do dodania klasy .active */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Ustawienia stylu dla zawartości można zwiń. Uwaga: domyślnie ukryte */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Krok 3 - Dodaj 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;
    jeśli (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Spróbuj sam

efekt związany z animacją (przesunięcie w dół)

Aby stworzyć efekt związany z animacją, dodaj max-height: 0、overflow: hide oraz max-height przedział.

Następnie, używając JavaScript, dodaj przejście do klasy panelu, ustawiając obliczony max-height Przesuń zawartość w dół, w zależności od wysokości panelu na różnych rozmiarach ekranu:

Przykład

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

Spróbuj sam

Dodaj ikonę

Dodaj znak do każdego przycisku, aby wskazać, czy zawartość można zwinąć lub rozwinąć:

Przykład

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

Spróbuj sam