부트스트랩 JS 축소
JS 축소(collapse.js)
아코디언 및 탐색과 같은 접을 수 있는 구성 요소에 대한 기본 스타일과 유연한 지원을 받으세요.
플러그인 종속성: 축소하려면 부트스트랩 버전에 전환 플러그인이 포함되어 있어야 합니다.
Collapsibles에 대한 튜토리얼은 Bootstrap Collapse 튜토리얼 을 읽어보세요 .
플러그인 클래스 축소
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
데이터-* 속성을 통해
data-toggle="collapse" 및 data-target을 요소에 추가하기만 하면 접을 수 있는 요소의 제어를 자동으로 할당할 수 있습니다. data-target 속성은 축소를 적용할 CSS 선택기를 허용합니다. 접을 수 있는 요소에 클래스 축소를 추가해야 합니다. 기본적으로 열리려면 추가 클래스를 추가하십시오.
예시
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
팁: 접을 수 있는 컨트롤에 아코디언과 같은 그룹 관리를 추가하려면 데이터 속성 data-parent="#selector"를 추가하세요.
자바스크립트를 통해
다음을 사용하여 수동으로 활성화:
$('.collapse').collapse()
접기 옵션
옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 data-parent=""에서와 같이 옵션 이름을 data-에 추가합니다.
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
축소 방법
다음 표에는 사용 가능한 모든 축소 방법이 나열되어 있습니다.
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element |
이벤트 축소
다음 표에는 사용 가능한 모든 축소 이벤트가 나열되어 있습니다.
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |
더 많은 예
단순 접을 수 있는
다음 예제에서는 버튼이 다른 요소의 확장 및 축소 콘텐츠를 토글하도록 합니다.
예시
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
Simple collapsible
</button>
<div id="demo" class="collapse in">
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.
</div>
접을 수 있는 패널
다음 예는 접을 수 있는 패널을 보여줍니다.
예시
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
축소 가능한 목록 그룹
다음은 내부에 목록 그룹이 있는 축소 가능한 패널을 보여줍니다.
예시
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
아코디언
다음 예제에서는 패널 구성 요소를 확장하여 간단한 아코디언을 보여줍니다.
참고: 속성 data-parent은 접을 수 있는 항목 중 하나가 표시될 때 지정된 부모 아래의 모든 접을 수 있는 요소가 닫히도록 합니다.
예시
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">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.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">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.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">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.</div>
</div>
</div>
</div>
확장 및 축소 아이콘 및 텍스트 전환
다음 예제에서는 접을 수 있는 콘텐츠를 열고 닫을 때 열기/닫기 텍스트와 아이콘을 변경합니다.
예시
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
또는 CSS를 사용할 수 있습니다.
예시
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
content: "\e080";
}