I am struggling to get a dropdown menu working properly with Bootstrap. Despite looking through similar questions on this forum, I have not yet found a solution that works for me. Below is the HTML head section of my code:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>On-Demand Reporting</title>
<link rel="stylesheet" type="text/css" href="styles/gridinator.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="scripts/bootstrap.js" type="text/javascript"></script>
<script src="scripts/jquery.tabify.js" type="text/javascript"></script>
</head>
It's important to note that JQuery is included before bootstrap.js in my markup.
The button code is based on Bootstrap 3 documentation:
<button type="button" class="btn btn-default dropdown pull-right" data-toggle="dropdown">
User <span class="caret"></span>
</button>
<ul class="dropdown-menu active" role="menu">
<li><a href="#">Change Password</a></li>
<li><a href="#">Logout</a></li>
</ul>
Finally, here is the script used to initialize the dropdown functionality:
<script>
$("document").ready(function() {
$(".dropdown").dropdown();
});
</script>
If anyone can offer assistance in identifying what might be causing the issue, I would greatly appreciate it. Thank you!