Twitter bootstrap stop propagation on dropdown open

Question

I have a twitter bootstrap dropdown inside a div with the plugin jOrgChart.

The problem I\'m having is that when I click the button to open the dropdown menu it also

Answer 1

$("#orgchart").jOrgChart({ chartElement: '#chart' });

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
    e.stopPropagation();
    $('.dropdown-menu').toggle();
});​

Stop Propagation then toggle. Example

---

I had to add the drop down menu items to the click handler to keep the behavior constant.

Answer 2

I used

$('.multiselect').on('click', function (e) {
    $(this).next('.dropdown-menu').toggle();
    e.stopPropagation();
});

This is similar to @Joe's answer, but a bit more generic

Answer 3

Try something like this:

$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {

            e.isDropDownToggleEvent =true;
})

Then:

$("div.node").click(function (e) {
     if (e.isDropDownToggleEvent != null && e.isDropDownToggleEvent)
         return false;

     return true;      
})

You can also try to put e.preventDefault() or e.stopPropagation(); instead of return false.

Answer 4

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
    e.stopPropagation();
    $(this).closest('.dropdown').toggleClass('open');
});​

You should use this instead as above solution doesn't close the dropdown on focus out.

Answer 5

If I understand correctly, you want to avoid closing menu.

$("div#chart .dropdown-menu li").bind('click',function (e) {
            e.stopPropagation();
        },false);

Answer 6

Building on Joe's answer, this includes the normal dropdown functionality of closing on the next click.

$("#orgchart").jOrgChart({ chartElement: '#chart' });

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click((e) => {
    e.stopPropagation();
    $('.dropdown-menu').toggle();

    // close on next click only
    $(window).one("click", () => $('.dropdown-menu').toggle());
});​