Bootstrap dropdown ne fonctionne pas
Je ne peux pas faire fonctionner la liste déroulante bootstrap. Voici mon html pour 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!
Démo de travail: http://codebins.com/bin/4ldqp73
essaye ça
<ul class='nav'>
<li class='active'>Home</li>
<li>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">asds</a></li>
<li class="divider"></li>
</ul>
</div>
</li>
<li>Payday loans</li>
<li>About</li>
<li>Contact</li>
</ul>
J'ai eu le même problème. Après quelques heures de dépannage trouvé que,
J'ai eu
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
au lieu de,
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
J'espère que cela aide quelqu'un
J'ai eu le même problème quand j'ai inclus le bootstrap.min.js à deux reprises. Supprimé l'un d'entre eux et il a commencé à fonctionner.
FYI: Si vous avez bootstrap.js, vous devriez pas ajouter bootstrap-dropdown.js.
Je ne suis pas sûr du résultat avec bootstrap.min.js.
Pour votre style, vous devez inclure les fichiers css de bootstrap, généralement juste avant l'élément </head>.
<link href="css/bootstrap.css" rel="stylesheet">
Ensuite, vous devrez inclure les fichiers js. Il est recommandé de les inclure à la fin du document, généralement avant le </body> pour que les pages se chargent plus rapidement.
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
Ajoutez les lignes suivantes dans les balises body.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files
as needed -->
<script src="js/bootstrap.min.js"></script>
vous devez importer ces fichiers dans le <head></head> de votre code HTML.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Avez-vous inclus jquery.js?
Comparez également cette ligne de code avec la vôtre:
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>
Voir cette version qui fonctionne bien.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap dropdown</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">w3resource</a>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li class="divider"></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<h1>Dropdown Example</h1>
</div>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
Bootstrap et jquery doivent être inclus:
<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>
<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>
REMARQUE: jquery-x.x.x.min.js version doit être version 2.x.x !!!
Je l'ai compris et le moyen le plus simple de le faire est simplement de copier et coller le lien CDN du lien d'amorçage qui se trouve dans https://www.bootstrapcdn.com/ et les scripts JND CDN disponibles ici https://code.jquery.com/ et après avoir copié les liens, les liens d’amorçage collent sur l’en-tête de HTML et le script Jquery collé dans le corps de HTML, comme dans l’exemple ci-dessous:
<!DOCTYPE html>
<html>
<head>
<title>Purrfect Match Landing Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="griddemo.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</body>
</html>
Pour moi ça marche parfait j'espère que ça marche aussi pour toi :)
Voici ce que j'ai fait, c'est .....
Vient de retirer bootstrap.min.js de mon projet et d’y ajouter bootstrap.js et que cela commence à fonctionner ...
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"
//"~/Scripts/bootstrap.min.js"));
Essayez ceci dans la section head
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
Vous devrez vérifier les fichiers/propriétés CSS en conflit. Par exemple, vous pourriez avoir le contenu du style personnalisé ".nav" ailleurs. Essayez de désactiver vos propres fichiers CSS et vérifiez si cela fonctionne, puis vérifiez le fichier ou le style personnalisé à l'origine des conflits. Assurez-vous également d'inclure le fichier bootstrap.min.js dans votre code.
J'ai eu un problème similaire seulement pour constater que j'avais ajouté le script d'amorçage deux fois et que le second script d'amorçage était après ci-dessus le script jquery.
Solution:
- Assurez-vous que bootstrap.min.js et jquery.min.js ne sont inclus qu'une fois dans votre fichier.
- Le script bootstrap.min.js devrait être inclus après jquery.min.js
Essayez ce code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=Edge">
<title>Bootstrap Tutorial</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<h1>Welcome to Bootstrap</h1>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Copiez/collez le lien CSS suivi du lien JS du site de démarrage ici . Ensuite, la liste déroulante devrait fonctionner.
Ma page ressemble à:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Website Title</title>
</head>
<body>
<div id="content" />
<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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
(Barre de navigation de ici )
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 fichier script jquery.
Solution: remplacé le script jquery par la version 2.2.0 de jquery.
Cela l'a résolu pour moi.
Pour moi, c'était un problème de la SCRO. J'ai supprimé crossorigin="anonymous" de mon script en important des balises, et cela a recommencé à fonctionner.
BTW les dernières balises de script, dans le bon ordre, peuvent toujours être trouvées ici: https://getbootstrap.com/
Modifier: Apparemment, ajouter defer à la balise script cassera également tous les goodies Bootstrap.