วิธีที่จะสร้าง: ปรากฎที่จะเคลื่อนย้าย

เรียนรู้วิธีที่จะสร้างส่วนที่สามารถเคลื่อนย้ายได้

可折叠效果

单击该按钮可在显示和隐藏可折叠内容之间切换。

Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. 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.

ทดลองด้วยตัวเอง

创建可折叠部分效果

第一步 - 添加 HTML：




  
Lorem ipsum...

第二步 - 添加 CSS：

设置手风琴样式：

/* 设置用于打开和关闭可折叠内容的按钮的样式 */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* 当按钮被点击时，以及当您将鼠标移到按钮上时（悬停），为按钮添加背景颜色（使用 JS 添加 .active 类） */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* 设置可折叠内容的样式。注意：默认隐藏 */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

ขั้นที่ 3 - เพิ่ม 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";
    }
  });
}

ทดลองด้วยตัวเอง

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

要創建一個帶動畫的折疊效果，請將 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 字符 */
}

ทดลองด้วยตัวเอง