Bootstrap dropdown doesn't collapse when click

Question

I'm using Bootstrap on a web app that has some pages that contain iframes. At this time, we're not able to remove the iframes. Bootstrap dropdown menus work fine to open, but if you click on any area of the page that's part of the iframe the collapse event doesn't fire.

Example here: http://jsfiddle.net/mark47/bCzMf/3/

Try clicking to close the menu anywhere outside the iframe and then within the iframe. Note: iframe content doesn't seem to show up in the fiddle, but you can see my problem.

Any idea how to make it collapse when clicking anywhere on the page?

UPDATE: With the help of @baptme answer, I was able to get it working. Described in my answer below.

Answer 1

There are more cases the drop-down menu doesn't collapse when clicking on another area, e.g. if the user clicks on another element that used event.stopPropagation(); on a click event.

My Solutions:

$(document).on('show.bs.dropdown', function ( event ) {

    //Get the element that responsible on opening the drop-down (parent of the clicked element)
    var $target = $(event.target);

    //Close the menu when the user click on any area
    $(document).one( 'mouseup.collapseBsDropdown', function() {
         $target.removeClass('open');
         $(window).off('blur.collapseBsDropdown');
    });
    $(window).one( 'blur.collapseBsDropdown', function() {
        $target.removeClass('open');
        $(document).off('mouseup.collapseBsDropdown');
    });
});

Thanks to @Witchfinder, I mixed your solution for the Iframe issue.

Answer 2

Based on @baptme answer and some tips on making an overlay found in another question, I was able to get this to work. The trick was getting it so you could still interact with the content of the iframe when the menu was closed.

What I did is put an overlay over the iframe area -- since the size of the iframe varies on different parts of the site, I used jquery to dynamically generate the size. By default set visibility: hidden. Then I had to modify the bootstrap-dropdown.js to change the visibility when the dropdown is open.

See the working fiddle here.

I didn't have to have to remove the data-toggle="dropdown" or the .open class as originally suggested.

Hopefully others will find this useful!

Answer 3

I resolved this problem using a different approach. My solution was to add a blur event to the window. Perhaps not as elegant as some of the other suggestions, but this is the one that I found worked.

$(window).on('blur',function() { $('.dropdown-toggle').parent().removeClass('open'); } );

I wanted to avoid an overlay or transparent mask, so this seemed like a good alternative. I'd welcome suggestions on improving this approach.

Answer 4

The closure of the dropdown is triggered by a click on the page.

Since the iframe is not the page, it doesn't close.

You must remove data-toggle="dropdown" call the dropdown with javascript $('.dropdown-toggle').dropdown()

then display a transparent div on the top of the iframe for example .transparent-mask

and with javascript (jQuery personnaly) remove the .open class from .dropdown on click on .transparent-mask or the document.

Answer 5

I ran across this post today, and found the following code worked for me. I just attached to the bootstrap events and created a backdrop on the fly. I wanted to set opacity so the user knew that clicking on the iframe part wouldn't do anything. Also, I have pages that don't include an iframe and I wanted them to function the same way. I had to disable scrolling for the non iframe pages as well. Hope this code helps.

var navBackdrop =
    $('<div id="nav-backdrop" class="modal-backdrop" tabindex="-1" style="z-index: 0; top: 50px; overflow-y: auto; display: none; opacity: .4"></div>');

$(document).ready(function () {
    $("body").append(navBackdrop);

    $(".navbar").on("shown.bs.dropdown", ".dropdown", function () {
        navBackdrop.show();
        $("body").css("overflow", "hidden");
    }).on("hide.bs.dropdown", ".dropdown", function () {
        navBackdrop.hide();
        $("body").css("overflow", "auto");
    });
});