Chevron 아이콘과 핵심 이벤트를 사용하여 Bootstrap 3 축소 상태를 우아하게 표시하려면 어떻게 해야 합니까?

Bootstrap 3 접기 상태에 대한 쉐브론 아이콘 표시

Collapse에 대한 Bootstrap 3 Javascript 문서에 제공된 핵심 예제를 활용하여 다음을 표시할 수 있습니다. 갈매기 모양 아이콘을 사용하여 요소의 확장 또는 축소 상태. 기존 구현에서는 다음 이벤트 핸들러를 사용하여 이를 달성합니다.

$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

이 접근 방식이 작동하는 동안 이 문제에 대한 더 우아한 솔루션이 있을 수 있습니다. 특히 핵심 기능인 $('#accordion').on('hidden.bs.collapse', ...)를 활용하여 원하는 효과를 얻을 수 있습니다.

제공된 HTML의 경우 Bootstrap 3 예제:

<div class="panel-group">
<p>갈매기형을 사용하여 축소 상태를 나타내려면 다음 CSS를 고려하세요. 아이콘:</p>
<pre class="brush:php;toolbar:false">.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

이러한 스타일을 적용하면 이제 Hidden.bs.collapse 이벤트를 사용하여 접기 상태에 따라 갈매기 모양 아이콘을 동적으로 업데이트할 수 있습니다.

$('#accordion').on('hidden.bs.collapse', function () {
    $('.accordion-toggle').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
});

$('#accordion').on('shown.bs.collapse', function () {
    $('.accordion-toggle').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
});

이것은 접근 방식은 Bootstrap 3에서 제공하는 핵심 이벤트를 활용하여 깔끔하고 간결한 코드 구조를 유지하면서 축소 상태 변경을 처리합니다.