Cara membuat: efek giling

Belajar cara membuat bagian yang dapat tergiling.

Efek dapat dipegang

Klik tombol ini untuk berubah antara menampilkan dan menyembunyikan konten yang dapat dipegang.

Beberapa konten yang dapat dipegang. Klik tombol untuk berubah antara menampilkan dan menyembunyikan konten yang dapat dipegang. 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.

Coba sendiri

Buat efek bagian yang dapat dipegang

Tahap pertama - Tambahkan HTML:

<button type="button" class="collapsible">Buka yang dapat dipegang</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Tahap kedua - Tambahkan CSS:

Atur gaya alat musik:

/* Atur gaya tombol untuk membuka dan menutup konten yang dapat dipegang */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Saat tombol di klik, serta saat kursor mouse diarahkan ke tombol (hover), tambahkan warna latar belakang tombol (gunakan JS untuk menambahkan .active class) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Atur gaya konten yang dapat dipegang. Perhatian: disembunyikan secara default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

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

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

Coba sendiri

添加图标

为每个按钮添加一个符号，以指示可折叠内容是打开还是关闭：

实例

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

Coba sendiri