Bootstrap 5 Navbar Dropdown Issue
Apabila cuba untuk melaksanakan menu navigasi responsif menggunakan Bootstrap 5, pengguna mungkin menghadapi masalah apabila butang dropdown atau item menu tidak berfungsi seperti yang dimaksudkan. Isu ini boleh timbul walaupun apabila jQuery disertakan dalam projek.
Sebab
Dalam Bootstrap 5, atribut data-* untuk pemalam JavaScript telah berubah. Sebelum ini, togol data dan sasaran data telah digunakan, tetapi dalam Bootstrap 5, mereka telah digantikan dengan togol data-bs dan sasaran data masing-masing.
Penyelesaian
Untuk menyelesaikan isu, gantikan data lama- atribut dengan data-bs- baharu atribut:
<button>
Pertimbangan Tambahan
Selain perubahan dalam atribut data-*, Bootstrap 5 juga memperkenalkan perubahan lain. Contohnya, kelas ml-auto dan mr-auto telah digantikan dengan ms-auto dan me-auto.
Demo
Coretan kod ini menunjukkan lungsur turun berfungsi butang:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
</head>
<body>
<nav>Atas ialah kandungan terperinci Mengapakah lungsur navbar Bootstrap 5 saya tidak berfungsi walaupun dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!