Paano gumawa: Epekto ng pagbukas-bukas

Matututunan kung paano gumawa ng napapalit na bahagi.

Epekto ng nakakliklik

I-click ang button upang palipat sa pagpapakita at pagtatali ng nakakliklik na nilalaman.

Ilang nakakliklik na nilalaman. I-click ang button upang palipat sa pagpapakita at pagtatali ng nakakliklik na nilalaman. 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.

亲自试一试

Lumikha ng epekto ng nakakliklik na bahagi

Unang hakbang - Magdagdag ng HTML:

<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Ikalawa ng hakbang - Magdagdag ng CSS:

Itatalaga ang estilo ng handpan:

/* Itinalaga ang estilo ng button na magbukas at magbukas ang mahahaba na nakakliklik na nilalaman */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Kapag inilagay ang button, at kapag inililipat ang mouse sa ibabaw ng button (hover), magdagdag ng kulay ng background sa button (dagdag .active klase gamit ang JS) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Itinalaga ang estilo ng mahahaba na nakakliklik na nilalaman. Babala: Ang default ay nakahiding */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Tatlong hakbang - Magdagdag ng 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;
    kung (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

亲自试一试

带动画的折叠效果（向下滑动）

要创建一个带动画的折叠效果，请将 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>

亲自试一试

添加图标

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

实例

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

亲自试一试