Bagaimanakah saya boleh menambah ikon chevron pada panel akordion Bootstrap 3 untuk menunjukkan secara visual keadaan runtuhnya menggunakan CSS?

Menggunakan CSS untuk Memaparkan Ikon Chevron untuk Keadaan Runtuh

Dalam rangka kerja Bootstrap 3, komponen akordion biasanya digunakan untuk mencipta panel boleh lipat. Walaupun kefungsian lalai panel ini termasuk menogol keterlihatan mereka, pengguna mungkin ingin meningkatkan lagi perkara ini dengan memaparkan secara visual keadaan runtuh semasa menggunakan ikon chevron.

Pendekatan CSS

Pendekatan CSS berikut boleh digunakan untuk menambah chevron pada tajuk panel:

.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 */
}

Untuk menggunakan ini pendekatan, tambahkan CSS di atas pada helaian gaya anda. Ini akan menambah chevron pada tajuk panel, dengan panel yang dibuka memaparkan chevron yang menghadap ke bawah dan panel yang runtuh memaparkan chevron yang menghadap ke atas.

Contoh HTML

Dengan ini CSS disediakan, HTML berikut akan menghasilkan panel boleh lipat dengan chevron ikon:

<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">

Pendekatan ini meningkatkan pengalaman pengguna dengan memberikan isyarat visual kepada keadaan semasa panel, menjadikannya lebih mudah untuk pengguna memahami dan berinteraksi dengan panel yang boleh dilipat.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menambah ikon chevron pada panel akordion Bootstrap 3 untuk menunjukkan secara visual keadaan runtuhnya menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!