About jquery.off and the dropdown menu

Question

I am using bootstrap-dropdown to generate a Dropdown menu.
I would like to disable some default behaviour by using jQuery.off.

1) how can I disable the disappear of Dropdown menu on a specific element and not all elements?
2) how can I disable the appearing of menu on a specific element and not all elements?

By using the following code I reach my goal by I would like to apply this behaviour on a specific element and not on all the document.

$('html').off('click.dropdown'); // it disable the disappear of Dropdown menu.
$('body').off('click.dropdown'); // it disable  the appearing of Dropdown menu. 
// Why this differance?

.​​​​

This is the jsfiddle link to test the code. Thanks to @merv for making the jsfiddle.

Answer 1

You can only use the off() method to disable a binding on a specific element that already has a binding. In pointing out $('html').off() , I was merely trying to demonstrate that the only binding which auto-closes dropdown menus is attached there.

Otherwise, you can add a new binding to elements in dropdown menus to stop the click event from bubbling up to the html element:

$('.dropdown-menu').on('click.dropdown', function(e) {e.stopPropagation()})​​​​​

JSFiddle

Answer 2

$(".disabled-link").click(function(event) {
  event.preventDefault();
});​

add the "disabled-link" class to any dropdown you don't want to work