Bagaimana untuk Mencegah Penutupan Auto Menu Responsif Bootstrap pada Desktop?

Penutupan Auto Menu Responsif dalam Bootstrap

Masalah:

Dalam tapak web Bootstrap, menu responsif membuka bar putih apabila butang "PRODUK" diklik. Walau bagaimanapun, apabila tapak web berada dalam mod desktop, mengklik butang secara tidak sengaja mengecilkan menu.

Penyelesaian:

Untuk mengelakkan menu daripada runtuh apabila diklik pada desktop, elakkan menambah JavaScript tambahan. Sebaliknya, ubah suai item senarai menu untuk memasukkan pemilih togol data dan sasaran data. Contohnya:

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Ulang langkah ini untuk setiap item menu.

Penyelesaian Diperluaskan untuk Menyelesaikan Isu Limpahan:

Untuk menangani limpahan dan kelipan isu, masukkan kod berikut:

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Ini menjadikan togol dan pemilih sasaran khusus untuk saiz skrin, menghapuskan gangguan pada skrin yang lebih besar.

Keserasian Versi Bootstrap:

Perhatikan bahawa kelas yang kelihatan/tersembunyi tidak digunakan dalam Bootstrap versi 4.1.3 dan 5.0 . Gunakan d-none d-sm-block bukannya hidden-xs, dan d-block d-sm-none bukannya visible-xs. Dalam Bootstrap versi 5, gantikan data-toggle dengan data-bs-toggle dan data-target dengan data-bs-target.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Penutupan Auto Menu Responsif Bootstrap pada Desktop?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!