recherche

Maison  >  Article  >  interface Web  >  Pourquoi mon menu déroulant Bootstrap 4 ne fonctionne-t-il pas ?

Pourquoi mon menu déroulant Bootstrap 4 ne fonctionne-t-il pas ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-18 01:10:01210parcourir

Why is my Bootstrap 4 Dropdown Menu Not Working?

Pourquoi mon menu déroulant Bootstrap 4 ne fonctionne-t-il pas ?

Problème :

Vous' J'ai implémenté l'exemple officiel Bootstrap 4 pour les menus déroulants, mais ils ne s'affichent pas lorsque vous cliquez dessus.

Solutions potentielles :

Assurez-vous de ce qui suit :

  • Inclure les fichiers requis :

    • Vérifiez que vous avez inclus jQuery, Popper.js et Bootstrap.js dans le bon ordre.

  • Vérifiez les erreurs dans la console :

    • Inspectez la console du navigateur pour détecter toute erreur ou avertissement.

  • Confirmer les ID des éléments :

    • Assurez-vous que les attributs d'identification de la bascule déroulante (dropdown01) et du menu déroulant (aria-labelledby="dropdown01" ) match.

Résolution de problèmes spécifiques :

  • Popper.js manquant : Il a Il a été signalé que l'absence de Popper.js pouvait être à l'origine de ce problème. Assurez-vous que Popper.js est inclus et fonctionne correctement.
  • Version Bootstrap obsolète : Vérifiez que vous utilisez la dernière version de Bootstrap 4. Les versions plus anciennes peuvent présenter ce comportement.

Exemple de travail :

Vous trouverez ci-dessous un exemple entièrement fonctionnel d'un menu déroulant Bootstrap 4 :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">

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!

jquery bootstrap for include using JS console this issue
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 SnappySnippet peut-il simplifier l'extraction de HTML CSS JS spécifiques à partir d'un site Web ?Article suivant：Comment SnappySnippet peut-il simplifier l'extraction de HTML CSS JS spécifiques à partir d'un site Web ?

Articles Liés

Voir plus