JS Collapse (collapse.js)
기본 스타일과 아코디언과 네비게이션 같은 접을 수있는 구성 요소에 대한 유연한 지원을받을 수 있습니다.
플러그인 종속성 : 축소는 부트 스트랩 버전에 포함되는 플러그인 전환이 필요합니다.
Collapsibles에 대한 자습서를 들어, 우리의 읽기 Bootstrap Collapse 자습서 .
The Collapse Plugin Classes
| 수업 | 기술 | 예 |
|---|---|---|
| .collapse | 내용을 숨 깁니다 | 시도 해봐 |
| .collapse in | 내용을 표시합니다 | 시도 해봐 |
| .collapsing | 이 완료되면 전환이 시작될 때 추가, 제거 | 시도 해봐 |
통해 data-* 속성
그냥 추가 data-toggle="collapse" 자동 축소 요소의 제어를 할당하는 요소와 데이터 대상. 데이터 대상 속성에 붕괴를 적용 할 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()축소 옵션
옵션 데이터 속성이나 자바 스크립트를 통해 전달 될 수 있습니다. 데이터 속성의 경우에서와 같이, 데이터 -에 옵션 이름을 추가 data-parent="" .
| 이름 | 유형 | 태만 | 기술 |
|---|---|---|---|
| parent | selector | false | 이 접을 수있는 항목이 표시 될 때 지정된 부모 미만 접을 수있는 요소는 종료됩니다. (전통적인 아코디언 동작과 유사 -이 패널 클래스에 따라 달라집니다) - 아래의 예를 참조하십시오 |
| toggle | boolean | true | 호출에 접을 수있는 요소를 전환 |
축소 방법
다음 표는 사용 가능한 모든 축소 방법을 보여줍니다.
| 방법 | 기술 | 시도 해봐 |
|---|---|---|
| .collapse( options ) | 옵션으로 접을 수있는 요소를 활성화합니다. 유효한 값은 위의 옵션을 참조하십시오 | |
| .collapse("toggle") | 접을 수있는 요소를 전환 | 시도 해봐 |
| .collapse("show") | 접을 수있는 요소를 보여줍니다 | 시도 해봐 |
| .collapse("hide") | 접을 수있는 요소를 숨 깁니다 | 시도 해봐 |
축소 이벤트
다음 표는 사용 가능한 모든 축소 이벤트를 보여줍니다.
| 행사 | 기술 | 시도 해봐 |
|---|---|---|
| show.bs.collapse | 접을 수있는 요소가 표시하려 할 때 발생 | 시도 해봐 |
| shown.bs.collapse | 접을 수있는 요소가 완전히 표시 될 때 발생합니다 (CSS 전환을 완료 한 후) | 시도 해봐 |
| hide.bs.collapse | 접을 수있는 요소가 숨겨져하려고 할 때 발생합니다 | 시도 해봐 |
| hidden.bs.collapse | 접을 수있는 요소가 완전히 숨겨져 때 발생합니다 (CSS 전환을 완료 한 후) | 시도 해봐 |
예
간단한 축소
다음의 예는 버튼이 다른 요소의 확대 및 축소 콘텐츠를 전환한다 :
예
<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";
} »그것을 자신을 시도