Escobar5 Escobar5 - 6 months ago 56
Javascript Question

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 click event in the parent div that does a collapse of other elements.

This is my html:

<div id="chart">
<div class="node">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu" style="text-align:left;">
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</div>

<div class="node">
...
</div>




I want to prevent the click of a.dropdown-toggle from bubbling to div.node, I tried with this:

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


But now the dropdown isn't working.

EDIT

This is the concrete case: http://jsfiddle.net/UTYma/2/ (Thanks to Joe Tuskan for starting the fiddle)

Joe Joe
Answer
$("#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.