Menu
I have an application that i'm slowly working to convert to jQuery & was going to use Bootstrap as well.
However when using Bootstrap 3, after clicking the drop down, the menu displays correctly. However after click off the menu or "closing" the menu. The button/link completely disappear and doesn't reappear until page refresh.
Same as this: https://github.com/twbs/bootstrap/issues/8379
The above link says to contact the google group, but I haven't seen anything requests regarding this in the group.
Any help would be greatly appreciated!
Thanks, -David
So using @GeekNum88's guidance, if you comment out these lines, the dropdown works, not sure the total effects of it yet:
function clearMenus() {
$(backdrop).remove()
$(toggle).each(function (e) {
var $parent = getParent($(this))
if (!$parent.hasClass('open')) return
// $parent.trigger(e = $.Event('hide.bs.dropdown'))
// if (e.isDefaultPrevented()) return
$parent.removeClass('open').trigger('hidden.bs.dropdown')
})
}
220
Implementing a Bootstrap drop-down menu is a very simple task. See the example in the Bootstrap documentation and follow these steps:
1. Include the following libraries in between the head tags just beneath the title tag
Make sure the jQuery library gets loaded before the Boostrap JS library.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
2. Paste the following HTML in between the body tags
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Working Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Dropdown</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</body>
</html>
To prove it is working, see the fiddle.
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
