반응형
Twitter 부트스트랩 접이식(아코디언)에 열기/닫기 아이콘 추가
간단한 버전의 부트스트랩 아코디언을 설정했습니다.
단순 아코디언: http://jsfiddle.net/darrenc/cngPS/
현재 아이콘은 아래 방향만 가리키고 있지만 아이콘의 클래스를 다음과 같이 변경하기 위해 구현해야 하는 JS가 무엇인지 아는 사람이 있습니까?
<i class="icon-chevron-up"></i>
확장할 때는 위로 이동하고 붕괴할 때는 다시 아래로 토글하도록 하고, 네 번째는?
부트스트랩 3(나처럼)에서 해결책을 찾고 있는 사람들을 위한 답입니다.
HTML 부분:
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>
js 파트:
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
예제 아코디언:
여기 부트스트랩 2.x에 대한 제 접근법이 있습니다.그것은 단지 약간의 CSS일 뿐입니다.자바스크립트 필요 없음:
.accordion-caret .accordion-toggle:hover {
text-decoration: none;
}
.accordion-caret .accordion-toggle:hover span,
.accordion-caret .accordion-toggle:hover strong {
text-decoration: underline;
}
.accordion-caret .accordion-toggle:before {
font-size: 25px;
vertical-align: -3px;
}
.accordion-caret .accordion-toggle:not(.collapsed):before {
content: "▾";
margin-right: 0px;
}
.accordion-caret .accordion-toggle.collapsed:before {
content: "▸";
margin-right: 0px;
}
아코디언 그룹 디브에 클래스 아코디언 케어를 추가하면 다음과 같습니다.
<div class="accordion-group accordion-caret">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
</div>
부트스트랩 붕괴에는 다음과 같이 대응할 수 있는 몇 가지 이벤트가 있습니다.
$(document).ready(function(){
$('#accordProfile').on('shown', function () {
$(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
});
$('#accordProfile').on('hidden', function () {
$(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
});
CSSes 의사 선택기를 사용합니다. HTML을 약간 수정한 후에 부트스트랩 3의 통합 글리폰을 사용합니다.
CSS
.panel-heading [data-toggle="collapse"]:after
{
font-family: 'Glyphicons Halflings';
content: "\e072"; /* "play" icon */
float: right;
color: #b0c5d8;
font-size: 18px;
line-height: 22px;
/* rotate "play" icon from > (right arrow) to down arrow */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after
{
/* rotate "play" icon from > (right arrow) to ^ (up arrow) */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
HTML
더하다class="collapsed"기본적으로 닫힌 모든 앵커 태그에 적용됩니다.
이것은 다음과 같은 닻을 만들 것입니다.
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
안으로
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
코드펜 라이브 예제
http://codepen.io/anon/pen/VYobER
스크린샷
@muffls answer에 추가되어 모든 트위터 부트스트랩 붕괴와 함께 작동하며 애니메이션이 시작되기 전에 화살표로 변경됩니다.
$('.collapse').on('show', function(){
$(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
}).on('hide', function(){
$(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
});
HTML 구조에 따라 수정해야 할 수도 있습니다.parent().
가장 좋은 코드는 다음과 같습니다.
$('#accordion1').collapse({
toggle: false
}).on('show',function (e) {
$(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
}).on('hide', function (e) {
$(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
관심 있는 사람이 있다면 이벤트 이름을 변경했기 때문에 BS3를 사용하면 다음과 같습니다.
$('.collapse').on('show.bs.collapse', function(){
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-right fa-caret-down');
}).on('hide.bs.collapse', function(){
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-down fa-caret-right');
});
예제의 클래스 이름을 경우에 사용하는 클래스 이름으로 변경하기만 하면 됩니다.
가장 읽기 쉬운 CSS 전용 솔루션은 아마도 아리아 확장 속성을 사용하는 것일 것입니다.aria-expanded="false"를 모든 접이식 elements에 추가해야 합니다. 왜냐하면 이것은 로드에 설정되어 있지 않기 때문입니다(처음 클릭할 때만).
HTML:
<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>
CSS:
h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
{
display: none;
}
h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
{
display: inline;
}
부트스트랩 3.x와 함께 작동합니다.
여기 @john-magnolia가 게시한 것보다 더 개선된 내 해결책이 있습니다. 그리고 몇가지 문제를 해결합니다.
/**
* Toggle on/off arrow for Twitter Bootstrap collapsibles.
*
* Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
*/
function animateCollapsibles() {
$('.collapse').on('show', function() {
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
}).on('hide', function(){
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
});
}
마크업의 예는 다음과 같습니다.
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
</div>
<div id="collapse-refund" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum Toholampi city</p>
</div>
</div>
</div>
</div>
부트스트랩 v3 솔루션(이벤트 이름이 서로 다른 경우) 또한 jQuery 셀렉터를 하나만 사용합니다(여기에 표시됨).
$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n) {
$(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
js 없이 이렇게 하는 거예요.
글리폰-삼각-오른쪽 아이콘을 사용했는데 다른 아이콘과 함께 작동합니다. 패널이 열려 있거나 열려 있지 않을 때 아이콘에 90도 회전을 적용하는 것입니다.저는 부트스트랩 3.3.5를 사용하고 있습니다.
CSS 코드
h4.panel-title a {
display: block;
}
h4.panel-title a.collapsed .glyphicon-triangle-right {
color: #ada9a9 !important;
transform: rotate(0deg);
}
h4.panel-title a .glyphicon-triangle-right {
color: #515e64 !important;
transform: rotate(90deg);
}
부트스트랩 예제에서 가져온 HTML 구조입니다.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Proven Expertise
<span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<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>
위의 것들 중 어느 것도 나에게 효과가 없었지만 나는 이것을 생각해 냈고 그것은 효과가 있었습니다:
function toggleChevron(el) {
if ($(el).find('i').hasClass('icon-chevron-left'))
$(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down");
else
$(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left");
}
HTML 구현:
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading" onClick="toggleChevron(this)">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
...
@롭 새들러:
RE 마틴 윅먼의 CSS 전용 버전...
앵커 태그에 아코디언 케어를 적용하고 기본적으로 붕괴된 클래스를 제공하여 이 문제를 해결할 수 있습니다.이와 같습니다.
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
그것은 저에게 효과가 있었습니다.
Bootstrup 3.2 + Font Awesome용
$(document).ready(function(){
$('#accordProfile').on('shown.bs.collapse', function () {
$(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
});
$('#accordProfile').on('hidden.bs.collapse', function () {
$(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
});
});
가끔은 그렇게 써야 합니다.그렇다면
$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
숨김 메뉴를 누르면 자동으로 생성(class="collapsed")됩니다.
ps 트리 메뉴를 만들어야 할 때
이것은 여러가지 방법으로 답을 얻었지만, 제가 생각해낸 것은 부트스트랩 3과 폰트가 멋진 저에게 가장 간단하고 쉬웠습니다.저는 그냥 했어요.
$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});
이것은 내가 보여주고 싶은 아이콘의 CSS 클래스를 토글합니다.이것을 적용하고 싶은 아이템에 클래스 토글러를 추가합니다.아이콘을 전환할 항목에 추가할 수 있습니다.
여기 아주 오래된 질문에 대한 2021년 업데이트가 있습니다.
부츠트랩 5
CSS 위/아래 삼각형을 사용하는 아이콘 불가지론 솔루션(특정 아이콘 lib 사용 안 함)...
/* for up.down arrows after collapse items with submenus */
[data-bs-toggle="collapse"]::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0;
border-right: 0.3em solid transparent;
border-bottom: 0.3em solid;
border-left: 0.3em solid transparent;
}
[data-bs-toggle="collapse"].collapsed::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-bottom: 0;
border-right: 0.3em solid transparent;
border-top: 0.3em solid;
border-left: 0.3em solid transparent;
}
붕괴 기능 자체를 사용하는 또 다른 노자바스크립트 솔루션:
/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in {
display: inline; }
.expand-icon.collapsing {
display: none; }
/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
<span class="my-collapse collapse-icon collapse in">
<span class="glyphicon glyphicon-collapse-up"></span>
</span>
<span class="my-collapse expand-icon collapse">
<span class="glyphicon glyphicon-expand"></span>
</span>
</a>
부트스트랩 3을 사용하는 CSS 전용(그리고 아이콘이 없는) 솔루션의 경우 위의 마틴 위크먼의 답변을 바탕으로 약간의 조작을 해야 했습니다.
아코디언-* 표기법은 BS3에서 패널로 하기 때문에 사용하지 않았습니다.
또한 페이지 로드 시 열려 있는 항목에 초기 HTML 아리아-expanded="true"를 포함시켜야 했습니다.
여기 제가 사용한 CSS가 있습니다.
.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }
다음은 내가 소독한 HTML입니다.
<div id="acc1">
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
</a>
</span>
</div>
<div id=“acc1-1” class="panel-collapse collapse in">
<div class="panel-body">
Text 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2
</a>
</span>
</div>
<div id=“acc1-2” class="panel-collapse collapse">
<div class="panel-body">
Text 2
</div>
</div>
</div>
</div>
가능한 한 가장 짧은 대답.
HTML
<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
<span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>
JS:
<script type="text/javascript">
$(function () {
$('a[data-toggle="collapse"]').click(function () {
$(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
})
})
</script>
그리고 물론 앵커 태그 대신 셀렉터에 무엇이든 사용할 수 있습니다.a대신 특정 셀렉터를 사용할 수도 있습니다.this아이콘이 클릭한 요소 밖에 있는 경우.
여기에는 다소 소재적인 디자인, 부트스트랩 4.5/5알파 및 완전히 비자바스크립트를 사용하여 확장 가능한 섹션을 생성하는 솔루션이 있습니다.
머리부분 스타일
<style>
[data-toggle="collapse"] .fa:before {
content: "\f077";
}
[data-toggle="collapse"].collapsed .fa:before {
content: "\f078";
}
</style>
본문 html
<div class="pt-3 pb-3" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; cursor: pointer;">
<a href="#expandId" class="text-dark float-right collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">
<i class="fa" aria-hidden="false"></i>
</a>
<a href="#expandId" class="text-dark collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">Expand Header</a>
<div class="collapse" id="expandId">
CONTENT GOES IN HERE
</div>
언급URL : https://stackoverflow.com/questions/13778703/adding-open-closed-icon-to-twitter-bootstrap-collapsibles-accordions
반응형
'programing' 카테고리의 다른 글
| 왜 sns로 sea born을 수입합니까? (0) | 2023.10.24 |
|---|---|
| 야생 비행에 전쟁 배치 19 (0) | 2023.10.24 |
| 키코드 13은 어떤 키를 위한 것입니까? (0) | 2023.10.24 |
| AngularJS로 확장 및 축소 (0) | 2023.10.24 |
| Node.js MySQL 영구 연결 필요 (0) | 2023.10.24 |