Bootstrap Tutorial - Keep Dropdown Open








The following code shows how to keep Dropdown Open.

Example

<!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>

Click to view the demo