I have a problem with my Bootstrap dropdown. When I click the button the menu doesn't show.
I know this question is asked many times before and I watched some tutorials on Youtube on how to make them but nothing works.
I tried many versions of Jquery and bootstrap js, I moved the scripts to the bottom of the code and I added this code:
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
This is what I have now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- link javascript -->
<script src=".11.0/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/dropdown.js"></script>
<!-- link CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- other stuff on my page -->
<!-- ADMIN TOOLS -->
<div class="adminToolsContainer">
<!-- dropdown -->
<div class="dropdown">
<!-- Drowdown button -->
<button class="btn btn-default drowdown-toggle" type="button" data-toggle="dropdown">
<!-- Button title and arrow -->
Admin tools <span class="caret"></span>
<!-- Dropdown content -->
<ul class="dropdown-menu">
<li class="dropdown-header">Blog</li>
<li><a href="#">Post lijst</a></li>
<li><a href="#">Maak post</a></li>
<li class="divider"></li>
<li class="dropdown-header">Accounts</li>
<li><a href="#">Gebruikerslijst</a></li>
<li><a href="#">Gebruiker toevoegen</a></li>
</ul>
</button>
</div>
</div>
<!-- END OF ADMIN TOOLS -->
</body>I have a problem with my Bootstrap dropdown. When I click the button the menu doesn't show.
I know this question is asked many times before and I watched some tutorials on Youtube on how to make them but nothing works.
I tried many versions of Jquery and bootstrap js, I moved the scripts to the bottom of the code and I added this code:
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
This is what I have now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- link javascript -->
<script src="http://www.ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/dropdown.js"></script>
<!-- link CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- other stuff on my page -->
<!-- ADMIN TOOLS -->
<div class="adminToolsContainer">
<!-- dropdown -->
<div class="dropdown">
<!-- Drowdown button -->
<button class="btn btn-default drowdown-toggle" type="button" data-toggle="dropdown">
<!-- Button title and arrow -->
Admin tools <span class="caret"></span>
<!-- Dropdown content -->
<ul class="dropdown-menu">
<li class="dropdown-header">Blog</li>
<li><a href="#">Post lijst</a></li>
<li><a href="#">Maak post</a></li>
<li class="divider"></li>
<li class="dropdown-header">Accounts</li>
<li><a href="#">Gebruikerslijst</a></li>
<li><a href="#">Gebruiker toevoegen</a></li>
</ul>
</button>
</div>
</div>
<!-- END OF ADMIN TOOLS -->
</body>I hope someone knows a solution. I don't know why but I always have trouble when I have to link Jquery and the bootstrap javascript.
Thanks for helping.
Share Improve this question edited Jun 5, 2016 at 13:31 Nieck asked Jun 5, 2016 at 13:12 NieckNieck 1,6464 gold badges22 silver badges42 bronze badges 1- Are you seeing any error when checking the Javascript Console ? – Akhilesh B Chandran Commented Jun 5, 2016 at 13:19
2 Answers
Reset to default 3Move .dropdown-menu to out of the button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- link CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<!-- other stuff on my page -->
<!-- ADMIN TOOLS -->
<div class="adminToolsContainer">
<!-- dropdown -->
<div class="dropdown">
<!-- Drowdown button -->
<button class="btn btn-default drowdown-toggle" type="button" data-toggle="dropdown">
<!-- Button title and arrow -->
Admin tools <span class="caret"></span>
</button>
<!-- Dropdown content -->
<ul class="dropdown-menu">
<li class="dropdown-header">Blog</li>
<li><a href="#">Post lijst</a>
</li>
<li><a href="#">Maak post</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Accounts</li>
<li><a href="#">Gebruikerslijst</a>
</li>
<li><a href="#">Gebruiker toevoegen</a>
</li>
</ul>
</div>
</div>
<!-- END OF ADMIN TOOLS -->
<!-- link javascript -->
<script src="https://code.jquery./jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>I know this question is quite old but the problem is still current. Here's my solution:
Ensure that you include the jquery, popper.js and bootstrap scripts in the proper order. Here's what I did. I switched the order mentioned on bootstrap. to load jQuery and popper.js first and then the bootstrap.css next
so something like
<script src="https://code.jquery./jquery-3.4.1.slim.min.js" integrity="...." crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/umd/popper.min.js" integrity="..." crossorigin="anonymous"></script>
and then
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-...." crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-..." crossorigin="anonymous"></script>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745453735a4628389.html
评论列表（0条）