Twitter Bootstrap Stop Propagation On Dropdown Open

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 triggers a clic

Solution 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.

Solution 2:

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

     returntrue;      
})

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

Solution 3:

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

Solution 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.

Solution 5:

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