Bootstrap 5 Navbar Dropdown Issue

Lorsque vous essayez d'implémenter un menu de navigation réactif à l'aide de Bootstrap 5, les utilisateurs peuvent connaître un problème dans lequel le bouton déroulant ou l'élément de menu ne fonctionne pas comme prévu. Ce problème peut se poser même lorsque jQuery est inclus dans le projet.

Cause

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

Solution

Pour résoudre le problème, remplacez les anciens attributs de données - par les nouvelles données-bs - attributs:

Considérations supplémentaires

Outre le changement dans les attributs de données, 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 démontre la liste déroulante fonctionnelle bouton: