Preventing bootstrap dropdown from closing on click

Question

I am trying to put checkboxes in a bootstrap dropdown. I do not want the dropdown to close on click but I still want it close if they click else where on the website. I still want to fire off other javascript actions on click with in the dropdown. I have an example of the exact inverse of what I want. This example closes the drop down on click but keeps it open when clicked from the outside the dropdown area.

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

http://jsfiddle.net/KyleMit/ZS4L7/

score 6 · Answer 1 · edited Jan 03 '15 at 22:19

I finally got it. the code is below:

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

Edit: Added missing semicolon on line 11.

score -1 · Answer 2 · answered Nov 19 '18 at 03:41

I had to achieve the same thing and wrote an even simpler one:

$('.dropdown.keep-open').one({
  'mouseenter': () => { $(this).data('closable', false); },
  'mouseleave': () => { $(this).data('closable', true); },
  'hide.bs.dropdown': () => !!$(this).data('closable')
});

I hope it helps someone. Btw, these are very dirty hacks, Bootstrap could really have an option for this.

Preventing bootstrap dropdown from closing on click

2 Answers2

Linked