The following code shows how to keep Dropdown Open.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-2.0.2.js'></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<style type='text/css'>
body {<!--from w w w. java 2s. c om-->
margin: 10px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.dropdown.keep-open').on({
"shown.bs.dropdown": function() { this.closable = false; },
"click": function() { this.closable = true; },
"hide.bs.dropdown": function() { return this.closable; }
});
});//]]>
</script>
</head>
<body>
<h2>Click the dropdown button</h2>
<p>It will stay open unless clicked again to close</p>
<div class="dropdown keep-open">
<!-- Dropdown Button -->
<button id="dLabel" role="button" href="#" data-toggle="dropdown"
data-target="#" class="btn btn-primary">
Dropdown <span class="caret"></span>
</button>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<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>
<!-- Post Info -->
<div
style='position: fixed; bottom: 0; left: 0; background: lightgray; width: 100%;'>
About this SO Question: <a
href='http://stackoverflow.com/q/19740121/1366033'>Keep dropdown
menu open</a><br /> Fork This Skeleton Here <a
href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br />
Bootstrap Documentation: <a
href='http://getbootstrap.com/javascript/#dropdowns'>Dropdowns</a><br />
<div>
</body>
</html>