부트스트랩을 사용하여 아코디언 효과 얻기

이전 단어

　Bootstrap 프레임워크의 Collapse 플러그인(접기)은 실제로 우리가 흔히 사용하는 아코디언 효과입니다. 트리거 요소를 클릭하면 다른 축소 가능한 영역에 표시되거나 숨겨지며, 다시 클릭하면 표시 상태가 반전될 수 있습니다. 클래식 장면은 여러 접는 영역의 아코디언 스타일과 단일 제목/콘텐츠의 스타일입니다. 이 기사에서는 부트스트랩 아코디언 효과를 자세히 소개합니다

구조

　아코디언의 가장 중요한 부분은 각 제목이 해당한다는 것입니다. 프레임워크에서 이 두 부분을 조합한 것을 패널이라고 합니다. 아래 효과에서 볼 수 있듯이 이 세 개의 패널을 합치면 패널 조합 패널 그룹이 됩니다. 아코디언의 구조

　 단순히 트리거와 접는 영역입니다.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button><div id="demo" class="collapse in">折叠区</div>

<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="#collapseOne">标题一</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body">标题一对应的内容</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">标题二对应的内容</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">标题三</a></h4></div><div id="collapseThree" class="panel-collapse collapse"><div class="panel-body">标题三对应的内容</div></div></div></div>

선언적 트리거링

트리거 아코디언은 사용자 정의 데이터 전환 속성을 통해 트리거될 수 있습니다. 데이터 토글 값은 축소, data-target="#접는 영역 식별자"로 설정됩니다. 다음으로 간단한 예를 살펴보겠습니다.

1단계: 세 개의 접는 영역이 있는 패널 조합을 디자인합니다

<div class="panel-group" id="myAccordion"><div class="panel panel-accordion panel-default"></div><div class="panel panel-accordion panel-default"></div><div class="panel panel-accordion panel-default"></div></div>

2단계: 패널에 콘텐츠를 추가합니다. 각 패널에는 두 부분이 포함됩니다. 첫 번째는 패널 제목 패널 제목입니다. 제목 패널 제목을 추가합니다. 두 번째 부분은 패널 축소 스타일을 사용하는 접는 영역인 패널 콘텐츠입니다.

<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title">标题一</h4></div><div class="panel-collapse"><div class="panel-body">折叠区内容...</div></div></div>

3단계: 제목과 콘텐츠 영역을 함께 묶기 위해 앵커를 통해 제목 영역과 패널 영역을 연결할 수 있습니다. 링크. 함께

<div class="panel-group" id="myAccordion"><div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1">标题一</a></h4></div><div class="panel-collapse" id="panel1"><div class="panel-body">折叠区内容...</div></div></div><div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel2">标题二</a></h4></div><div class="panel-collapse" id="panel2"><div class="panel-body">折叠区内容...</div></div></div>......</div>

4단계: 패널의 콘텐츠 영역 표시 여부를 제어합니다. 부트스트랩 프레임워크에서 콘텐츠 영역을 숨기려면 패널 축소 스타일에 축소만 추가하면 됩니다. 기본적으로 콘텐츠 영역을 표시하려면 스타일 축소를 추가하고 in

<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1">标题一</a></h4></div><div class="panel-collapse collapse" id="panel1"><div class="panel-body">折叠区内容...</div></div></div>

5단계: 아코디언 대화형 동작을 활성화합니다. 대화형 동작을 완료하려면 제목 링크에서 두 가지 속성을 사용자 정의해야 합니다. 하나는 데이터 전환이고 다른 하나는 데이터 대상이며 해당 값은 다음과 같은 각 패널 콘텐츠 영역의 식별자입니다. 이 예에서는 각각 #panel1, #panel2 및 #panel3입니다.

　　[참고] 이 경우 data-target="#panel1"也可以，因为前面已经有了href="#panel1"，但如里是button按钮作为触发器就必须使用data-target="#panel1" 문

<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4></div><div class="panel-collapse collapse in" id="panel1"><div class="panel-body">折叠区内容...</div></div></div>

　을 추가하지 마세요. 6단계: 이를 실현하기 위해 data-parent 속성을 정의하세요. 요소 중 하나를 클릭하면 접을 수 있는 영역을 모두 닫고 클릭한 영역을 엽니다(클릭한 영역이 표시되면 닫힙니다). 이 데이터 상위 값은 아코디언 패널 컨테이너의 식별자와 일치합니다. 예를 들어 이 예는 #myAccordion

<div class="panel-group" id="myAccordion"><div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a></h4></div>…

위의 6단계를 통해 다음 사항을 요약할 수 있습니다. 패널을 트리거 요소로 사용하고 패널 본문의 상위 요소를 접는 영역으로 사용합니다.

　색 패널 그룹을 사용하여 여러 패널을 포함하여 아코디언 효과를 얻습니다.

　xml 각 패널의 트리거 요소는 데이터를 지정해야 합니다. -parent 속성, 데이터 -parent 속성의 값은 패널 그룹 스타일 요소의 ID 또는 기타 스타일 식별자에 해당합니다.

　🙌 트리거 요소는 데이터 전환을 지정해야 하며 값은

　plain입니다. 트리거 요소는 data-target 속성인 data-target을 지정해야 합니다. 속성 값은 panel-body의 상위 요소의 ID 또는 기타 스타일 식별자에 해당합니다. 요소인 경우 href 속성을 지정할 수 있습니다. 대신

<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="#panel1">标题一</a></h4></div><div id="panel1" class="panel-collapse collapse in"><div class="panel-body">折叠区内容一</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4></div><div id="panel2" class="panel-collapse collapse"><div class="panel-body">折叠区内容二</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4></div><div id="panel3" class="panel-collapse collapse"><div class="panel-body">折叠区内容三</div></div></div></div>

JS Trigger

【키워드】

<span style="color: #000000;">$(element).collapse('show');//显示折叠区域
$(element).collapse('hide');//隐藏折叠区域
$(element).collapse('toggle');//反转折叠区域<br></span>

显示折叠区域隐藏折叠区域反转折叠区域<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="#panel1">标题一</a></h4></div><div id="panel1" class="panel-collapse collapse in"><div class="panel-body">折叠区内容一</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4></div><div id="panel2" class="panel-collapse collapse"><div class="panel-body">折叠区内容二</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4></div><div id="panel3" class="panel-collapse collapse"><div class="panel-body">折叠区内容三</div></div></div></div><script>$(function(){
    $('#btn1').click(function(){
        $('.collapse').collapse('show');
    })
    $('#btn2').click(function(){
        $('.collapse').collapse('hide');
    })
    $('#btn3').click(function(){
        $('.collapse').collapse('toggle');
    })
})</script>

【이벤트】

이 플러그인은 4가지 유형의 이벤트 구독을 지원합니다.

show.bs.collapse        show方法调用之后立即触发该事件
shown.bs.collapse   　　 此事件在collapse已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.collapse        hide方法调用之后立即触发该事件。
hidden.bs.collapse    　此事件在collapse被隐藏（并且同时在 CSS 过渡效果完成）之后被触发

<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" data-html="标题一" href="#panel1">标题一</a></h4></div><div id="panel1" class="panel-collapse collapse in"><div class="panel-body">折叠区内容一</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题二" href="#panel2">标题二</a></h4></div><div id="panel2" class="panel-collapse collapse"><div class="panel-body">折叠区内容二</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" data-html="标题三" href="#panel3">标题三</a></h4></div><div id="panel3" class="panel-collapse collapse"><div class="panel-body">折叠区内容三</div></div></div></div><script>$(function(){
    $("#accordion").on("show.bs.collapse",function(e){var $element = $(e.target).siblings().first().find('a');
        $element.html($element.data('html') + '[折叠区已打开]');
    }).on("hide.bs.collapse",function(e){var $element = $(e.target).siblings().first().find('a');
        $element.html($element.data('html') + '[折叠区已关闭]');
    })

});    
</script>

위 내용은 부트스트랩을 사용하여 아코디언 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!