Skip to content

Instantly share code, notes, and snippets.

@StephanieMak
Forked from evanp/gist:6456479
Last active September 17, 2015 00:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save StephanieMak/a729839cfd1ef8352c55 to your computer and use it in GitHub Desktop.
Save StephanieMak/a729839cfd1ef8352c55 to your computer and use it in GitHub Desktop.
This is an example of using the JavaScript .dropdown("toggle") method in Bootstrap Because Bootstrap doesn't clear the "open" class on the dropdown parent, it stays open.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test dropdown toggle</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="dropdown">
<a class="dropdown-toggle" id="dropdownMenu1" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<script>
$(document).ready(function() {
$("a.dropdown-toggle").click(function(ev) {
$("a.dropdown-toggle").dropdown("toggle");
return false;
});
$("ul.dropdown-menu a").click(function(ev) {
$("a.dropdown-toggle").dropdown("toggle");
return false;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment