부트스트랩은 매일 접는 법을 배워야 합니다_javascript 기술-JS 튜토리얼-php.cn

이 기사는 주로 JavaScript 플러그인 접기에 대해 학습하는 데 중점을 둡니다.
1. 전환 효과
전환 효과에 대하여
간단한 전환 효과를 원하시면 다른 JS 파일과 함께 Transition.js를 도입하시면 됩니다. 컴파일된(또는 압축된) bootstrap.js 파일을 사용하는 경우 별도로 가져올 필요가 없습니다.
내용
Transition.js는 TransitionEnd 이벤트의 기본 도우미이자 CSS 전환 효과의 시뮬레이션이기도 합니다. 현재 브라우저가 CSS 전환 효과를 지원하는지 여부를 감지하기 위해 다른 플러그인에서 사용됩니다.
2. 접기
아코디언 및 탐색과 같은 접기 기능을 지원하는 구성 요소에 기본 스타일과 유연한 지원을 제공합니다.

플러그인 종속성

접이식 플러그인은 전환 효과 플러그인에 의존합니다.

사례
접이식 플러그인을 사용하여 패널 컴포넌트를 확장하여 간단한 아코디언 컴포넌트를 제작합니다.
먼저 효과를 살펴보겠습니다.

코드 구현을 살펴보겠습니다.

<div class="container" style="margin-top:140px;">
  <div class="panel-group" id="accordion">
  <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
   <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item </a>
   </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse in">
   <div class="panel-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="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
   <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a>
   </h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
   <div class="panel-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="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
   <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a>
   </h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse">
   <div class="panel-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>
 </div>

로그인 후 복사

1단계: 먼저 가장 바깥쪽 레이어인 패널 그룹에는 이 레이어 아래에 여러 그룹이 포함되어 있습니다.
2단계: 몇 가지 간단한 그룹 살펴보기

<div class="panel panel-default">
 <div class="panel-heading">
  <h4 class="panel-title">
  <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a>
  </h4>
 </div>
 <div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body">
  </div>
 </div>
</div>

로그인 후 복사

패널의 구조는 코드를 통해 명확하게 알 수 있습니다.
panel-header 및 pandl-body 및 panel-header에는 제목과 링크가 포함될 수 있습니다. 링크를 통해 패널 본체에 연결됩니다.
3단계: 패널 그룹에 id="accordion"이 있고 아래 각 제목 아래 링크에 data-parent="#accordion"이 있는 것을 확인할 수 있습니다.
제거하면 다른 링크를 클릭한 후 원래 패널이 더 이상 축소되지 않는 효과가 있습니다.
또 다른 방법으로 접는 효과를 보여줄 수 있습니다.

 <div class="container" style="margin-top:140px;">
 <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"> simple collapsible </button>

<div id="demo" class="collapse in">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>

로그인 후 복사

사용방법
폴딩 플러그인은 몇 가지 간단한 클래스를 통해 스타일을 제어합니다
.collapse 콘텐츠 숨기기
.쇼 콘텐츠에서 축소
.붕괴. 이는 전환이 시작될 때 추가되고, 완료되면 제거됩니다. 이는 아마도 접힌 부분이 추가된 후에 전환 효과가 있고, 제거되면 종료된다는 의미일 것입니다.
데이터 속성을 통해
data-toggle="collapse" 및 data-target을 추가하면 페이지 요소에 축소 제어 기능을 부여할 수 있습니다. data-target 속성은 CSS 선택기를 제어 개체로 허용합니다. 접을 수 있는 페이지 요소에 대해 접기 클래스를 추가해야 합니다. 접을 수 있는 페이지 요소의 기본 상태를 확장하려면 클래스에 추가하세요.
축소 가능한 페이지 요소 그룹에 컨트롤러를 추가하려면 data-parent="#selector"를 추가하세요. 위의 예를 참고하시면 됩니다.
자바스크립트를 통해

<button type="button" class="btn btn-danger" onClick="Open()">打开</button>
<button type="button" class="btn btn-danger" onClick="Hide()">折叠</button>

<div id="demo" class="collapse in">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 class="panel-group" id="accordion" style="margin-top:240px;">

로그인 후 복사

 <script type="text/javascript"> $(function(){
   $("#demo").collapse({
 toggle: false })
  }) 
  function Open(){
  $("#demo").collapse("show");
  }
 function Hide(){
  $("#demo").collapse("hide");
  } </script>

로그인 후 복사

위의 효과를 살펴보겠습니다

방법
페이지 요소에 축소 가능한 기능을 제공합니다. 선택적 개체를 매개변수로 허용합니다.
$("#demo").collapse({toggle: false})
이렇게 하면 초기화 시 요소가 확장됩니다.
1.collapse('toggle')는 접을 수 있는 페이지 요소를 표시하거나 숨깁니다.
2.collapse('show')는 접을 수 있는 페이지 요소를 표시합니다.
3.collapse('hide')는 접을 수 있는 페이지 요소를 숨깁니다.
이벤트
Bootstrap의 접이식 플러그인은 청취할 수 있는 일련의 이벤트를 노출합니다.

이것은 숨겨진 이벤트를 요소에 바인딩합니다.
이상이 이 글의 전체 내용이며, 모든 분들의 공부에 도움이 되기를 바랍니다.