Disable Bootstrap popup menu when closing clicks

Question

My menu uses Bootstrap 3, and I can’t prevent the drop down menu from being clicked. How can i do this?

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

Answer 1

You need to stop the event from the bubbles of the DOM tree:

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

event.stopPropagation prevents the event from reaching the node, where it is ultimately handled by the Bootstrap hide menu.

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

Answer 2

I believe this should be a better solution, since stopping propagation by the click event can sometimes cause problems at later stages of development. You can read more about it here: http://css-tricks.com/dangers-stopping-event-propagation/ Instead, this solution stops the propagation in the Bootstrap hide event (hide.bs.dropdown), which stops its transition to hidden (hidden.bs.dropdown) event.

The following code was taken and edited by me in order to make it work in all Bootstrap drop-down lists, as it was originally taken from here: Preventing the drop-down menu from closing on click I personally prefer this method also because it uses Bootstrap's built-in dropdown events, which can find 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; } }); }); 

Answer 3

Do not close click in 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; } }); 

});

Answer 4

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

An example with an input field inside a 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 for everything that can be clicked, and you can individually determine which items are clicked, close or not close the drop-down menu.