Prevent Bootstrap dropdown from closing on clicks

Question

My menu uses Bootstrap 3 and I can't prevent dropdown from closing on click. How can I do it?

JSFiddle

 // Add open class if active
  $('.sidebar-nav').find('li.dropdown.active').addClass('open');

  // Open submenu if active
  $('.sidebar-nav').find('li.dropdown.open ul').css("display","block");

  // Change active menu
  $(".sidebar-nav > li").click(function(){
    $(".sidebar-nav > li").removeClass("active");
    $(this).addClass("active");
  });

  // Add open animation
  $('.dropdown').on('show.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // Add close animation
  $('.dropdown').on('hide.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

Solution 1

You need to stop event from bubbling up the DOM tree:

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.

Demo: http://jsfiddle.net/wkc5md23/3/

Solution 2

I believe this should be a more proper solution, as stopping propagation on the click event might sometimes cause issues later on in development. You may read more into it here: http://css-tricks.com/dangers-stopping-event-propagation/ Instead this solution stops propagation on the Bootstrap hide (hide.bs.dropdown) event, which stops it from continuing on to the hidden (hidden.bs.dropdown) event.

The following code has been taken and edited by myself to make it work on all Bootstrap dropdowns, as it has originally been taken from here: Preventing bootstrap dropdown from closing on click I personally prefer this way also because it uses the built in Bootstrap dropdown events, which could be found here: https://getbootstrap.com/docs/3.4/javascript/#dropdowns-events.

  $(function() {
      $('.dropdown').on({
          "click": function(event) {
            if ($(event.target).closest('.dropdown-toggle').length) {
              $(this).data('closable', true);
            } else {
              $(this).data('closable', false);
            }
          },
          "hide.bs.dropdown": function(event) {
            hide = $(this).data('closable');
            $(this).data('closable', true);
            return hide;
          }
      });
  });

Comments

[Kasara]

Nice. But it work only on menu links. click somewhere else on body.

[dfsq]

You want menu never close at all?

[Kasara]

Yes, only if menu dont have dropdown.

[dfsq]

So menu never close if you click outside?

[Kasara]

Yes never close if you click outside menu

[Kasara]

Yes. You are da best :)

[Ernesto]

The accepted answer did not work for me. It prevents closing, but it also prevent the clicks in my controls within the dropdown to work at all. This solution gave me exactly what I wanted, which is exactly what this question asked for. Thanks!

[jwanglof]

Still works fyi. Thanks! :)

[mrbangybang]

This is the best option if you have toggles switch or others buttons inside the dropdown menu. Thanks! +5