Source

무너지다

몇 가지 클래스와 JavaScript 플러그인을 사용하여 프로젝트 전체에서 콘텐츠의 가시성을 전환합니다.

작동 방식

축소 JavaScript 플러그인은 콘텐츠를 표시하고 숨기는 데 사용됩니다. 버튼이나 앵커는 토글하는 특정 요소에 매핑되는 트리거로 사용됩니다. height요소를 축소하면 현재 값에서 로 애니메이션이 적용 됩니다 0. CSS가 애니메이션을 처리하는 방식을 감안할 때 요소 padding에 사용할 수 없습니다 . .collapse대신 클래스를 독립적인 래핑 요소로 사용하십시오.

이 구성 요소의 애니메이션 효과는 prefers-reduced-motion미디어 쿼리에 따라 다릅니다. 접근성 설명서의 감소된 동작 섹션을 참조하십시오 .

예시

클래스 변경을 통해 다른 요소를 표시하거나 숨기려면 아래 버튼을 클릭하십시오.

  • .collapse내용을 숨깁니다
  • .collapsing전환 중에 적용됩니다.
  • .collapse.show콘텐츠를 보여줍니다

속성 이 있는 링크를 사용 href하거나 속성이 있는 버튼을 사용할 수 있습니다 data-target. 두 경우 모두 data-toggle="collapse"필수입니다.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

다중 대상

<button>or 는 or 속성 <a>에서 JQuery 선택기로 참조하여 여러 요소를 표시하거나 숨길 수 있습니다 . 다중 또는 각 요소가 또는 속성 으로 참조하는 경우 요소를 표시하거나 숨길 수 있습니다.hrefdata-target<button><a>hrefdata-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

아코디언 예

카드 구성 요소를 사용하여 기본 축소 동작을 확장하여 아코디언을 만들 수 있습니다. .accordion아코디언 스타일을 제대로 구현하려면 래퍼 로 사용해야 합니다 .

애님 사랑스러운 진부한 표현, enim eiusmod high life accusamus terry richardson ad squid. 3 Wolf moon officia aute, non cupidatt 스케이트보드 돌로 브런치. 푸드트럭 quinoa nesciunt labum eiusmod. 브런치 3 울프 문 템포, 선트 알리쿠아 새를 올려 놓은 오징어 싱글 오리진 커피 nulla squeezendashoreditch et. Nihil anim keffiyeh helvetica, 수제 맥주 laboure wes anderson cred nesciunt sapiente ea proident. 광고 비건 예외 정육점 부사장 lomo. 레깅스 occaecat 크래프트 맥주 농장에서 식탁까지, 생 데님 미학적 신디사이저 nesciunt accusamus laboure 지속 가능한 VHS에 대해 들어 본 적이 없을 것입니다.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

접근성

aria-expanded컨트롤 요소 에 추가 해야 합니다. 이 속성은 컨트롤에 연결된 접을 수 있는 요소의 현재 상태를 화면 판독기 및 유사한 보조 기술에 명시적으로 전달합니다. 접을 수 있는 요소가 기본적으로 닫혀 있는 경우 제어 요소의 속성 값은 aria-expanded="false". show클래스 를 사용하여 기본적으로 열리도록 접을 수 있는 요소를 설정 aria-expanded="true"한 경우 대신 컨트롤에서 설정합니다. 플러그인은 축소 가능한 요소가 열렸거나 닫혔는지 여부(JavaScript를 통해 또는 사용자가 동일한 축소 가능한 요소에 연결된 다른 제어 요소를 트리거했기 때문에)에 따라 컨트롤에서 이 속성을 자동으로 토글합니다. 컨트롤 요소의 HTML 요소가 버튼이 아닌 경우(예: <a>또는 <div>), 속성은role="button"요소에 추가해야 합니다.

제어 요소가 단일 축소 가능한 요소를 대상으로 하는 경우(즉, 속성이 선택기 data-target를 가리키는 경우) 축소 가능한 요소 를 포함하는 속성을 제어 요소에 추가해야 합니다 . 최신 화면 판독기 및 유사한 보조 기술은 이 속성을 사용하여 사용자에게 접을 수 있는 요소 자체로 직접 이동할 수 있는 추가 단축키를 제공합니다.idaria-controlsid

Bootstrap의 현재 구현은 WAI-ARIA Authoring Practices 1.1 아코디언 패턴 에 설명된 다양한 키보드 상호 작용을 다루지 않는다는 점에 유의하십시오 . 사용자 정의 JavaScript에 이러한 상호 작용을 직접 포함해야 합니다.

용법

접기 플러그인은 무거운 작업을 처리하기 위해 몇 가지 클래스를 사용합니다.

  • .collapse내용을 숨깁니다
  • .collapse.show내용을 보여줍니다
  • .collapsing전환이 시작될 때 추가되고 완료되면 제거됩니다.

이러한 클래스는 에서 찾을 수 있습니다 _transitions.scss.

데이터 속성을 통해

data-toggle="collapse"요소에 및 를 추가하기만 하면 data-target하나 이상의 접을 수 있는 요소에 대한 제어를 자동으로 할당할 수 있습니다. 속성 은 data-target축소를 적용할 CSS 선택기를 허용합니다. collapse접을 수 있는 요소 에 클래스를 추가해야 합니다 . 기본적으로 열리도록 하려면 추가 클래스를 추가하십시오 show.

접을 수 있는 영역에 아코디언과 같은 그룹 관리를 추가하려면 data 속성을 추가합니다 data-parent="#selector". 실제 작동을 보려면 데모를 참조하십시오.

자바스크립트를 통해

다음을 사용하여 수동으로 활성화:

$('.collapse').collapse()

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-parent="".

이름 유형 기본 설명
부모의 선택기 | jQuery 객체 | DOM 요소 거짓 부모가 제공되면 이 축소 가능한 항목이 표시될 때 지정된 부모 아래의 모든 축소 가능한 요소가 닫힙니다. (기존의 아코디언 동작과 유사 - 이것은 card클래스에 따라 다릅니다). 속성은 대상 축소 가능 영역에 설정되어야 합니다.
비녀장 부울 진실 호출 시 접을 수 있는 요소를 토글합니다.

행동 양식

비동기식 메서드 및 전환

모든 API 메서드는 비동기식 이며 전환 을 시작합니다 . 전환이 시작되자마자 그러나 끝나기 전에 호출자에게 돌아갑니다 . 또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.

자세한 내용은 JavaScript 설명서를 참조하십시오 .

.collapse(options)

콘텐츠를 접을 수 있는 요소로 활성화합니다. 선택적 옵션을 허용합니다 object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

축소 가능한 요소를 표시 또는 숨김으로 전환합니다. 접을 수 있는 요소가 실제로 표시되거나 숨겨 지기 전(즉, shown.bs.collapse또는 hidden.bs.collapse이벤트가 발생하기 전) 호출자에게 반환됩니다.

.collapse('show')

접을 수 있는 요소를 표시합니다. 접을 수 있는 요소가 실제로 표시 되기 전(즉, shown.bs.collapse이벤트가 발생하기 전) 호출자에게 반환합니다.

.collapse('hide')

접을 수 있는 요소를 숨깁니다. 접을 수 있는 요소가 실제로 숨겨 지기 전에(즉, hidden.bs.collapse이벤트가 발생하기 전에) 호출자에게 반환됩니다.

.collapse('dispose')

요소의 붕괴를 파괴합니다.

이벤트

부트스트랩의 접기 클래스는 접기 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다.

이벤트 유형 설명
show.bs.collapse show이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
표시됨.bs.collapse 이 이벤트는 축소 요소가 사용자에게 표시되면 시작됩니다(CSS 전환이 완료될 때까지 대기).
hide.bs.collapse hide이 이벤트는 메서드가 호출 되면 즉시 시작됩니다 .
hidden.bs.collapse 이 이벤트는 축소 요소가 사용자에게 숨겨졌을 때 시작됩니다(CSS 전환이 완료될 때까지 기다림). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})