Bagaimanakah Saya Boleh Membuat Dropdown Bootstrap Aktifkan pada Hover dan Keluarkan Anak Panah?

Turun Turun Menu Bootstrap Berlegar

Memperluas topik lungsur turun menu Bootstrap, artikel ini menyelidiki menyesuaikan tingkah laku dan penampilan mereka. Khususnya, ia meneroka cara untuk mendayakan menuding sebagai alternatif kepada mengklik untuk pengaktifan menu dan mengalih keluar anak panah yang disertakan.

Turun Turun Automatik pada Tuding

Untuk mencapai menu lungsur automatik pada hover, pengubahsuaian CSS diperlukan. Dengan menyasarkan pilihan menu tersembunyi dan memaparkannya sebagai blok apabila item senarai yang sepadan dituding di atas, kefungsian yang diingini tercapai. Pertimbangkan contoh berikut daripada dokumentasi Bootstrap:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Pertimbangan Responsif

Jika ciri responsif Bootstrap digunakan, fungsi dropdown automatik mungkin tidak diingini untuk navigasi yang runtuh bar pada skrin yang lebih kecil. Untuk menangani perkara ini, kod CSS boleh dibungkus dalam pertanyaan media:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Penyingkiran Anak Panah (Caret)

Menyembunyikan anak panah jatuh bergantung pada versi Bootstrap digunakan.

Bootstrap 3

Untuk Bootstrap 3, cuma alih keluar elemen HTML daripada elemen utama .dropdown-togol.

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <!-- remove this line -->
</a></p>
<p><strong>Bootstrap 2 dan Lower</strong></p>
<p>Dalam Bootstrap 2 dan lebih awal, pemilih CSS dan kod di bawah boleh digunakan untuk mengalih keluar anak panah:</p>
<pre class="brush:php;toolbar:false">a.menu:after, .dropdown-toggle:after {
    content: none;
}

Kesimpulan

Menyesuaikan menu lungsur Bootstrap untuk diaktifkan pada tuding dan mengalih keluar anak panah membolehkan pengalaman pengguna yang dipertingkatkan dan keutamaan estetik. Memahami prinsip CSS yang mendasari memberi kuasa kepada pembangun untuk melaksanakan pengubahsuaian ini dengan lancar dalam projek mereka.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Dropdown Bootstrap Aktifkan pada Hover dan Keluarkan Anak Panah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!