Bagaimana membuat: kesan penggulungan

Belajar bagaimana membuat bahagian yang dapat terbuka dan terbuka.

Efek dapat dicilik

Klik tombol ini untuk beralih antara menampilkan dan menyembunyikan kandungan yang dapat dicilik.

Beberapa kandungan yang dapat dicilik. Klik tombol untuk beralih antara menampilkan dan menyembunyikan kandungan yang dapat dicilik. 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.

Cuba sendiri

Buat efek bagian yang dapat dicilik

Keselamatan ke-1 - Tambahkan HTML：

<button type="button" class="collapsible">Buka Kunci Pecah</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Keselamatan ke-2 - Tambahkan CSS：

Tetapkan gaya alat musik angin:

/* Tetapkan gaya untuk tombol yang digunakan untuk membuka dan menutup kandungan yang dapat dicilik */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Ketika tombol diklik, serta ketika kursor diarahkan ke atas tombol (hover), tambahkan warna latar belakang untuk tombol (gunakan JS untuk menambahkan .active class) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Tetapkan gaya untuk kandungan yang dapat dicilik. Perhatian: Tersembunyi secara lalai */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Keselamatan ke-3 - Tambahkan 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;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Cuba sendiri

帶動畫的折疊效果（向下滑動）

要創建一個帶動畫的折疊效果，請將 max-height: 0、overflow: hide 以及 max-height 屬性的過渡添加到面板類中。

然後，使用 JavaScript 通過設定計算出的 max-height 來向下滑動內容，具體取決於面板在不同螢幕尺寸上的高度：

实例

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

Cuba sendiri

添加圖標

為每個按鈕添加一個符號，以指示可折疊內容是打開還是關閉：

实例

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

Cuba sendiri