Bagaimana Menutup Menu Responsif Bootstrap secara Automatik pada Klik Item?

Bootstrap: Auto-Tutup Menu Responsif pada Klik Item Menu

Apabila memaparkan menu responsif dalam Bootstrap, anda mungkin mahu menutup menu secara automatik selepas item menu diklik pada peranti mudah alih atau tablet sambil mengekalkan keadaan terbuka desktop.

Isu:

Pengguna cuba menggunakan $('.btn-navbar').click(); dan $('.nav-collapse').toggle(); untuk mencapai gelagat ini, tetapi ia menyebabkan menu mengecut secara tidak dijangka pada desktop.

Penyelesaian:

Untuk menyelesaikan isu ini, ubah suai item menu anda untuk memasukkan togol data dan atribut sasaran data, seperti yang anda lakukan dengan butang togol Navbar. Sebagai contoh, untuk item menu "Produk":

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

Ulangi ini untuk setiap item menu.

Pembetulan Tambahan:

Untuk menangani isu limpahan dan kelipan, tambah 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 akan menjadikan togol dan sasaran pemilih khusus saiz skrin, menghapuskan gangguan pada menu yang lebih besar.

Kemas Kini Versi Bootstrap:

• Bootstrap v4.1.3 & v5.0: Gantikan kelas yang kelihatan/tersembunyi dengan d-none d-sm-block dan d-block d-sm-none.
• Bootstrap v5: Gantikan data-togol dengan data-bs-toggle dan data-target dengan data-bs-target.

Dengan melaksanakan pengubahsuaian ini, anda boleh menutup menu responsif secara automatik pada klik item menu sambil mengekalkan fungsinya pada peranti desktop.

Atas ialah kandungan terperinci Bagaimana Menutup Menu Responsif Bootstrap secara Automatik pada Klik Item?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!