이 간단한 버전의 Bootstrap 아코디언을 설정했습니다 .
간단한 아코디언 :
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");
});
아코디언 예 :
답변
다음은 Bootstrap 2.x에 대한 나의 접근 방식입니다. 그것은 단지 CSS입니다. JavaScript가 필요하지 않습니다.
.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;
}
다음 과 같이 accordion-caret 클래스 를 accordion-group div에 추가하십시오.
<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>
답변
Bootstrap Collapse에는 반응 할 수있는 몇 가지 이벤트가 있습니다.
$(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 pseudo-selector 사용 : HTML을 약간 수정하여 No JS 답변에 Bootstrap 3의 통합 Glyphicons를 사용한 후 …
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">
CodePen 라이브 예제
http://codepen.io/anon/pen/VYobER
스크린 샷
답변
@muffls 답변에 추가되어 모든 트위터 부트 스트랩 축소와 함께 작동하고 애니메이션이 시작되기 전에 화살표를 변경합니다.
$('.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');
});
예제의 클래스 이름을 귀하의 경우에 사용하는 이름으로 변경하면됩니다.
