Bagaimanakah Saya Boleh Memaparkan Keadaan Runtuh Bootstrap 3 Menggunakan Ikon Chevron dan Acara Teras?

Penunjuk Ikon Chevron untuk Keadaan Runtuh Bootstrap 3

Menggunakan contoh teras yang disediakan dalam dokumentasi Javascript Bootstrap 3 untuk Runtuh, adalah mungkin untuk dipaparkan keadaan elemen yang dibesarkan atau diruntuhkan menggunakan ikon chevron. Pelaksanaan sedia ada mencapai ini menggunakan pengendali acara berikut:

$('#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");
});

Sementara pendekatan ini berfungsi, mungkin terdapat penyelesaian yang lebih elegan untuk cabaran ini. Khususnya, anda ingin memanfaatkan fungsi teras, $('#accordion').on('hidden.bs.collapse', ...) untuk mencapai kesan yang diingini.

Untuk HTML yang disediakan dalam contoh Bootstrap 3:

<div class="panel-group">
<p>Pertimbangkan CSS berikut untuk menunjukkan keadaan runtuh menggunakan chevron ikon:</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 */
}

Dengan adanya gaya ini, anda kini boleh menggunakan acara hidden.bs.collapse untuk mengemas kini ikon chevron secara dinamik berdasarkan keadaan runtuh:

$('#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');
});

Ini pendekatan memanfaatkan peristiwa teras yang disediakan oleh Bootstrap 3 untuk mengendalikan perubahan keadaan runtuh, sambil mengekalkan struktur kod yang bersih dan ringkas.