ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery を使用しても Bootstrap 5 のナビゲーションバー ドロップダウンが機能しないのはなぜですか?
jQuery を使用しても Bootstrap 5 のナビゲーションバー ドロップダウンが機能しないのはなぜですか?
- Susan Sarandonオリジナル
- 2024-12-08 19:32:14258ブラウズ
Bootstrap 5 の Navbar ドロップダウンの問題
Bootstrap 5 を使用して応答性の高いナビゲーション メニューを実装しようとすると、ドロップダウン ボタンが表示されなくなる問題が発生する可能性があります。またはメニュー項目が意図したとおりに機能しません。この問題は、jQuery がプロジェクトに含まれている場合でも発生する可能性があります。
原因
Bootstrap 5 では、JavaScript プラグインの data-* 属性が変更されました。以前は data-toggle と data-target が使用されていましたが、Bootstrap 5 では、それぞれ data-bs-toggle と data-bs-target に置き換えられました。
Solution
問題を解決するには、古い data- 属性を新しい data-bs- に置き換えます。属性:
<button>
追加の考慮事項
data-* 属性の変更に加えて、Bootstrap 5 では他の変更も導入されています。たとえば、ml-auto クラスと mr-auto クラスは、ms-auto と me-auto に置き換えられています。
デモ
このコード スニペットは、機能するドロップダウンを示しています。ボタン:
<!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>以上がjQuery を使用しても Bootstrap 5 のナビゲーションバー ドロップダウンが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。