Keep Bootstrap popup on click

Question

If the drop-down list is visible and I go beyond the drop-down list, it closes. I need it to not close.

From the documentation:

When opened, the plugin also adds .dropdown-backdrop as a click area to close the drop-down menus when clicked outside the menu.

What kind of JavaScript can I add to prevent the page from closing?

Answer 1

In the Bootstrap dropdown event section:

hide.bs.dropdown . This event is fired immediately after the hide instance method is called.

To begin with, to prevent the popup menu, we can just listen to this event and not continue it by returning false :

 $('#myDropdown').on('hide.bs.dropdown', function () { return false; }); 

---

For a complete solution, you probably want it to close when the dropdown list itself clicks. Therefore, only for some time we want the window to not close.

To do this, we will set the .data() flags in two more events raised by the drop-down menu:

• shown.bs.dropdown . When shown, we will set .data('closable') to false
• click - when clicking the .data('closable') button, set true

Thus, if the hide.bs.dropdown event was raised by click in the drop-down list, we will allow closing.

Live demo in jsFiddle

Javascript

 $('.dropdown.keep-open').on({ "shown.bs.dropdown": function() { this.closable = false; }, "click": function() { this.closable = true; }, "hide.bs.dropdown": function() { return this.closable; } }); 

HTML (note that I added the keep-open class to the drop-down list)

 <div class="dropdown keep-open "> <!-- Dropdown Button --> <button id="dLabel" role="button" href="#" class="btn btn-primary" data-toggle="dropdown" data-target="#" > 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> 

Answer 2

Version changes caused KyleMit to some extent, and most other solutions no longer work. I went a little deeper and for some reason click() sent when Bootstrap tries and fails to hide.bs.dropdown , and then another call to hide.bs.dropdown . I circumvented this problem by closing click() on the button itself, and not on the popup menu.

Live demo in bootply

Javascript

 $('.keep-open').on({ "shown.bs.dropdown": function() { $(this).attr('closable', false); }, //"click": function() { }, // For some reason a click() is sent when Bootstrap tries and fails hide.bs.dropdown "hide.bs.dropdown": function() { return $(this).attr('closable') == 'true'; } }); $('.keep-open').children().first().on({ "click": function() { $(this).parent().attr('closable', true ); } }) 

HTML

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

Answer 3

 $('.dropdown.keep-open').on({ "shown.bs.dropdown": function() { this.closable = true; }, "click": function(e) { var target = $(e.target); if(target.hasClass("btn-primary")) this.closable = true; else this.closable = false; }, "hide.bs.dropdown": function() { return this.closable; } }); 

 body { margin: 10px; } 

 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <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> 

Answer 4

I found a solution that does not require new js. Do not use the dropdown menu and use the run-in instead. I still use some drop down classes to create it as a drop down menu.

 <div class="dropdown"> <button class="dropdown-toggle" type="button" data-toggle="collapse" data-target="#myList">Drop Down <span class="caret"></span></button> <div id="myList" class="dropdown-menu"> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car"> I have a car<br></div> 

Answer 5

Another solution for this. Keep the dropdown list open after clicking inside .dropdown-menu:

 $('.heading .options .dropdown').on({ "shown.bs.dropdown":function(){this.closable = true;}, "click": function(e){ var target = $(e.target); var d = target.data(); if(typeof d.toggle != 'undefined' && d.toggle == 'dropdown') this.closable = true; else { var p = target.parent(); var dd = p.data(); if(typeof dd.toggle != 'undefined' && dd.toggle == 'dropdown') this.closable = true; else { if(target.hasClass('dropdown-menu')) this.closable = false; else { var pp = target.parent('.dropdown-menu'); if(typeof pp != 'undefined') this.closable = false; else this.closable = true; } } } }, "hide.bs.dropdown": function(){return this.closable;} }); 

Answer 6

Keep dropdown menu after clicking inside .dropdown-menu

  $(document.body).on({ "shown.bs.dropdown": function(){ this.closable = true; }, "hide.bs.dropdown": function(){ return this.closable; }, "click": function(e){ this.closable = !$(e.target).closest(".dropdown-menu").length; }, },".dropdown.keepopen");