Le menu déroulant de Bootstrap ne fonctionne pas

Question

Le menu déroulant de Bootstrap ne fonctionne pas

Demandé el 17 de Septembre, 2012: Quand la question a-t-elle été
424396 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je n'arrive pas à faire fonctionner le dropdown de bootstrap. Voici mon html pour le nav :

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Et voici les scripts :

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

Qu'est-ce que je fais mal ? Merci pour vos réponses !

Demandé el 17 de Septembre, 2012 par hjuster

Answer 1

5 Réponses

Answer 2

2voto

Amir De Points 721

Copiez-collez le jQuery ci-dessous <script> et feuille de style <link> dans votre <head> pour s'assurer que vous chargez tous les fichiers nécessaires.

Il est important que votre JQuery .js se trouve au-dessus de .css feuille de style

Il suffit de coller la ligne suivante pour tester

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Le problème se produit surtout lors du chargement du script de jQuery, assurez-vous que vous ajoutez les références correctement.

Maintenant, testez

Si cela ne fonctionne pas, consultez le site Web de Bootstrap, qui propose un exemple de mise en œuvre.

https://getbootstrap.com/docs/4.3/components/navbar/#supported-content

Répondu el 27 de Mai, 2020 par Amir De (721 Points )

Answer 3

1voto

Mancy Points 61

Vous devrez vérifier les fichiers/properties css en conflit ; par exemple, vous pourriez avoir un style personnalisé ".nav" ailleurs ; essayez de désactiver vos propres fichiers css et vérifiez si cela fonctionne, puis vérifiez quel fichier ou style personnalisé est à l'origine du conflit. Vérifiez également que vous incluez le fichier bootstrap.min.js dans votre code.

Répondu el 19 de Avril, 2016 par Mancy (61 Points )

Answer 4

1voto

B.K Points 317

J'ai eu un problème similaire, mais j'ai constaté que j'avais ajouté le script d'amorçage. deux fois et le deuxième bootstrap script était après au-dessus de le jquery script.

Solution :

Assurez-vous que bootstrap.min.js et jquery.min.js ne sont inclus qu'une seule fois dans votre fichier.
Le script de bootstrap.min.js doit être inclus après jquery.min.js

Répondu el 3 de Mai, 2019 par B.K (317 Points )

Answer 5

1voto

Rider Harrison Points 23

Dans mon cas, la question initiale s'est avérée être la réponse. Sur page de documentation sur les bootstraps il n'est pas fait mention de l'utilisation d'un script pour activer les listes déroulantes mais il semble que cela soit nécessaire pour que cela fonctionne, du moins dans mon cas.

Une fois que j'ai ajouté ce script de la question originale, cela a commencé à fonctionner comme par magie.

<script>
 $(document).ready(function(){
    $('.dropdown-toggle').dropdown()
});
</script>

--Edit : La cause fondamentale était quelque chose à voir avec le formatage de mon conteneur nav parent, j'ai fait sauter toute ma section nav et l'ai remplacée par l'exemple bootstraps et cela a commencé à fonctionner sans le script. Ainsi, les deux solutions fonctionnent, mais la suppression de la section semblait être la méthode "correcte" pour moi, car le script me semblait être une tricherie.

Répondu el 7 de Mai, 2021 par Rider Harrison (23 Points )

Answer 6

0voto

Everest Nwosu Points 11

J'ai eu le même problème qui m'a amené ici.

Mon problème : J'utilisais la version recommandée de jquery 1.12.0 comme mon fichier jquery script.

Solution : remplacer le jquery script par la version jquery 2.2.0.

Cela a résolu le problème pour moi.

Répondu el 6 de Février, 2016 par Everest Nwosu (11 Points )

Le menu déroulant de Bootstrap ne fonctionne pas

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Le menu déroulant de Bootstrap ne fonctionne pas

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: