Bagaimanakah Saya Boleh Menyesuaikan Penunjuk Runtuh Bootstrap 3 dengan Ikon Chevron?

Menggunakan Bootstrap 3 untuk Memaparkan Keadaan Runtuh dengan Ikon Chevron

Rangka kerja Bootstrap menyediakan fungsi yang meluas untuk mencipta elemen boleh lipat, seperti menu dan panel . Secara lalai, elemen ini memaparkan tanda tambah ( ) apabila diruntuhkan dan tanda tolak (-) apabila dikembangkan. Walau bagaimanapun, mungkin terdapat keadaan apabila anda ingin menyesuaikan penunjuk keadaan runtuh dengan ikon yang lebih menarik secara visual, seperti chevron.

Menyesuaikan Penunjuk Runtuh

Untuk mencapai penyesuaian ini, pertimbangkan pendekatan berikut:

1. Tambah Tersuai CSS: Cipta peraturan CSS untuk menentukan ikon chevron yang diingini. Dalam kes ini, ikon chevron dipilih daripada set Halfling Glyphicons.

.panel-heading .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114"; /* chevron down */
    float: right;
    color: grey;
}
.panel-heading .accordion-toggle.collapsed:after {
    content: "\e080"; /* chevron up */
}

2. Tetapkan Gaya Glyphicon: Tambahkan kelas yang sesuai pada elemen togol akordion anda ke memastikan paparan chevron yang betul ikon.

<h4 class="panel-title">
  <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
    Collapsible Group Item #1
  </a>
</h4>

Pendekatan Fungsi Teras

Walaupun penyelesaian yang disediakan berkesan mencapai hasil yang diinginkan, ia tidak menggunakan fungsi teras Bootstrap terbina dalam untuk mengendalikan kejadian runtuh. Untuk menggunakan fungsi teras, anda boleh mengikuti langkah berikut:

1. Ikat kepada Acara 'hidden.bs.collapse': Lampirkan pengendali acara pada 'hidden.bs.collapse ' acara pada elemen keruntuhan induk.

$('#accordion').on('hidden.bs.collapse', function () {
    // Update chevron icon
});

2. Kemas kini Ikon Chevron: Dalam pengendali acara, anda boleh mengemas kini ikon chevron dengan sewajarnya, bergantung pada keadaan runtuh.

if ($(this).find('.panel-collapse').hasClass('in')) {
    // Collapse shown, set down chevron
} else {
    // Collapse hidden, set up chevron
}

Dengan mengikuti salah satu pendekatan ini, anda boleh menyesuaikan ikon penunjuk digunakan untuk mewakili keadaan runtuh, memberikan pengalaman pengguna yang lebih intuitif dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Penunjuk Runtuh Bootstrap 3 dengan Ikon Chevron?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!