Pourquoi ma barre de navigation Bootstrap 5 ne fonctionne-t-elle pas même avec jQuery ?-js tutoriel-php.cn

Pourquoi ma barre de navigation Bootstrap 5 ne fonctionne-t-elle pas même avec jQuery ?

Susan Sarandon

Libérer： 2024-12-08 19:32:14

original

181 Les gens l'ont consulté

Why isn't my Bootstrap 5 navbar dropdown working even with jQuery?

Problème de liste déroulante de la barre de navigation Bootstrap 5

Lors de la tentative d'implémentation d'un menu de navigation réactif à l'aide de Bootstrap 5, les utilisateurs peuvent rencontrer un problème où le bouton déroulant ou l'élément de menu ne fonctionne pas comme prévu. Ce problème peut survenir même lorsque jQuery est inclus dans le projet.

Cause

Dans Bootstrap 5, les attributs data-* pour les plugins JavaScript ont changé. Auparavant, data-toggle et data-target étaient utilisés, mais dans Bootstrap 5, ils ont été remplacés respectivement par data-bs-toggle et data-bs-target.

Solution

Pour résoudre le problème, remplacez les anciens attributs data- par les nouveaux attributs data-bs- attributs :

<button>

Copier après la connexion

Considérations supplémentaires

Outre le changement dans les attributs data-*, Bootstrap 5 introduit également d'autres changements. Par exemple, les classes ml-auto et mr-auto ont été remplacées par ms-auto et me-auto.

Démo

Cet extrait de code montre le fonctionnement de la liste déroulante bouton :

<!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&#160;protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
        crossorigin="anonymous"
    />
</head>
<body>
    <nav>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!