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?

 // 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();
  });

Related question: https://stackoverflow.com/questions/25089297/avoid-dropdown-menu-close-on-click-inside — Carol Skelly, Apr 23 '18 at 11:19

dfsq · Accepted Answer · 2014-10-29T19:59:52.013

49

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/

edited Oct 29 '14 at 19:59

answered Oct 29 '14 at 19:54

dfsq

191,768
25
236
258

1

Nice. But it work only on menu links. click somewhere else on body. – Kasara Oct 29 '14 at 20:00
You want menu never close at all? – dfsq Oct 29 '14 at 20:02
Yes, only if menu dont have dropdown. – Kasara Oct 29 '14 at 20:09
So menu never close if you click outside? – dfsq Oct 29 '14 at 20:16
Yes never close if you click outside menu – Kasara Oct 29 '14 at 20:17
Yes. You are da best :) – Kasara Oct 29 '14 at 20:51

score 25 · Answer 2 · edited Nov 16 '22 at 03:51

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;
    }
  });
});

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! — Ernesto, Mar 01 '17 at 03:17
This is the best option if you have toggles switch or others buttons inside the dropdown menu. Thanks! +5 — mrbangybang, May 16 '19 at 14:56

score 0 · Answer 3 · edited Nov 16 '22 at 03:50

Not close in click out side menu

$(function() {
  var closeble = false;
  $('body').on('click', function (e) {
    if (!$(event.target).is('a.dropdown-toggle')) {
      closeble = false;
    }
  });
  
  $('.dropdown').on({
    'click': function (event) {
      if ($(event.target).closest('.dropdown-toggle').length) {
        closeble = true;
      } else {
        closeble = false;
      }
    },
    'hide.bs.dropdown': function () {
      return closeble;
    }
  });
});

score 0 · Answer 4 · edited Nov 16 '22 at 03:49

You can disable the dropdown functionality temporarily. This is a workaround.

Example with input field inside the drop-down "menu":

//for dropdown field not closing when clicking on inputfield
$(document).on('focus', 'input', function (e) {
  // this attribute can be anything except "dropdown", you can leave it blank
  $('#yourDropdownID').attr('data-toggle', 'off');
});

//for dropdown field back to normal when not on inputfield
$(document).on('focusout', 'input', function (e) {
  $('#yourDropdownID').attr('data-toggle', 'dropdown');
});

This can be used on anything that is clickable and you can define individually what items clicked can close or not close the drop-down menu.

Prevent Bootstrap dropdown from closing on clicks

4 Answers4

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

Linked

Related