작성 방법: 접기 효과

학습하려면 접히는 부분을 만드는 방법을 배웁니다.

접히는 부분 효과 생성

첫 번째 단계 - HTML 추가:

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

두 번째 단계 - CSS 추가:

필리포트 스타일 설정:

/* 접히는 내용을 열고 닫는 버튼의 스타일을 설정합니다 */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* 버튼이 클릭될 때와 마우스를 버튼에 가져다놓을 때(호버) 버튼에 배경색을 추가합니다(JavaScript를 사용하여 .active 클래스 추가) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* 접히는 내용의 스타일을 설정합니다. 주의: 기본적으로 숨김 처리 */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

세 번째 단계 - 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 字符 */
}

직접 시도해 보세요