Nasıl oluşturulur: Katlanma etkisi

Öğrenin nasıl katlanabilir parçalar oluşturulur.

Açılır etki

Bu düğmeyi tıklayarak açılır içeriği gösterme ve gizleme arasında geçiş yapabilirsiniz.

Bazı açılır içerik. Düğmeyi tıklayarak açılır içerik gösterme ve gizleme arasında geçiş yapın. 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.

Kişisel olarak deneyin

Açılır kısımlar etkisi oluşturun

İlk adım - HTML ekleyin：

<button type="button" class="collapsible">Açılır Geçiş Açın</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

İkinci adım - CSS ekleyin：

Akordiyon tarzını ayarlayın：

/* Açılıp kapanan içerik için düğme tarzını ayarlayın */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Düğme tıklanırken ve fareni tıklarsanız (sallantı), düğmeye arka plan rengi ekleyin (JS ile .active sınıfını ekleyin) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Kullanılabilir içeriğin tarzını ayarlayın. Dikkat: varsayılan olarak gizlenir */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Üçüncü adım - JavaScript ekleyin：

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

Kişisel olarak deneyin

Animasyonlu katlanma etkisi (aşağı kaydırma)

Bir animasyonlu katlanma etkisi oluşturmak için, max-height: 0、overflow: hide ve max-height özniteliğinin geçiş eklemek için JavaScript kullanarak panolara sınıf ekleyin.

Sonra, hesaplanan max-height İçeriği aşağıya kaydırın, bu da panellerin farklı ekran boyutlarına göre yüksekliğine bağlıdır:

Örnek

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

Kişisel olarak deneyin

İkon ekleyin

Her düğmeye bir simge ekleyerek, katlanabilir içeriğin açık mı kapalı mı olduğunu belirtin:

Örnek

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

Kişisel olarak deneyin