Bagaimanakah Saya Boleh Menggunakan Glyphicon Bootstrap untuk Menunjukkan Keadaan Panel Boleh Dilipat Secara Dinamik?

Menggunakan Bootstrap Glyphicons untuk Menunjukkan Keadaan Runtuh

Dokumentasi Bootstrap 3 untuk Collapse menyediakan contoh yang menggunakan CSS untuk memaparkan ikon chevron untuk menunjukkan keadaan panel boleh lipat. Penyelesaian ini, walau bagaimanapun, mungkin tidak berfungsi dengan sempurna merentas semua penyemak imbas.

Penyelesaian yang Lebih Elegan

Untuk mencipta penyelesaian yang lebih elegan, kami boleh menggunakan data Bootstrap 3- togol atribut untuk mengemas kini kelas Glyphicon secara dinamik berdasarkan keadaan runtuh:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<div class="panel-group">
<pre class="brush:php;toolbar:false">$('.accordion-toggle').on('click', function (e) {
    var chevron = $(e.target).children('i.glyphicon');
    chevron.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

Ini penyelesaian menggunakan jQuery untuk menogol kelas Chevron apabila keruntuhan dicetuskan. Kelas glyphicon-chevron-down ditambah apabila panel dibuka, manakala kelas glyphicon-chevron-up ditambah apabila panel runtuh. Ini memberikan petunjuk dinamik dan responsif tentang keadaan runtuh.