recherche

Maison >interface Web >js tutoriel >Pourquoi ma barre de navigation Bootstrap 5 ne fonctionne-t-elle pas même avec jQuery ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-12-08 19:32:14168parcourir

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>

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>

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!

JavaScript jquery bootstrap for auto using function this issue mr Other
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment puis-je rechercher efficacement des objets avec des attributs spécifiques dans un tableau JavaScript ?Article suivant：Comment puis-je rechercher efficacement des objets avec des attributs spécifiques dans un tableau JavaScript ?

Articles Liés

Voir plus