Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)

like image 584
Escobar5 Avatar asked Sep 07 '12 17:09

Escobar5


People also ask

How do I stop click event propagation?

To stop an event from further propagation in the capturing and bubbling phases, you call the Event. stopPropation() method in the event handler. Note that the event. stopPropagation() method doesn't stop any default behaviors of the element e.g., link click, checkbox checked.

How do I stop dropdown menu to close menu items on clicking outside?

For Bootstrap 4, look for the clickEvent , and when found in the hide event, prevent the default close behavior. This dropdown will only close when the button is clicked. In some cases, you may want the Dropdown to close when the button or menu is clicked. In this case you can examine the clickEvent target.

How do I keep my drop down menus open?

Set toggle={false} property inside DropdownItem to prevent dropdown from closing.

What is drop down in bootstrap?

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.


3 Answers

$("#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.
like image 79
Joe Avatar answered Oct 26 '22 15:10

Joe


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.

like image 32
Sebastian.Belczyk Avatar answered Oct 26 '22 15:10

Sebastian.Belczyk


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

like image 1
thelem Avatar answered Oct 26 '22 14:10

thelem