Bootstrap dropdown-menu doesn't get close when clicking an element

Question

I'm firing the bootstrap dropdown menu by using the javascript function dropdown('toggle') as stated in their docs.

Usually dropdowns would hide whenever you click outside them or you select one of their options.

This doesn't happen when firing it through javascript.

In this reproduction you'll see two menus:

One which works as expected as its fired using the "components" trigger
And another one, using the right click, which doesn't work as expected. (it doesn't get closed on click outside or even on element click)

I was able to "manually" get rid of the dropdown menu when clicking outside it by using the following:

$('body').removeClass('open');

But I'm not quite sure why dropdown menus don't work in the same way as when you fire them by the normal procedure. And having to manually hide them doesn't seem like the best solution...

In the example you'll see two different drop menus. One which works as expected as its fired using the "components" trigger. And another one, when using the right click of your mouse, which doesn't work as expected. (it doesn't get closed) — Alvaro, Sep 08 '15 at 15:09

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

I got an answer from boostrap issues forum in which they explained how to deal with it:

B. You're missing a <div class="dropdown"> around the <ul class="dropdown-menu">

C. You're missing an element with data-toggle="dropdown" (Not explicitly documented, but followed by all the examples and related to the warning in http://getbootstrap.com/javascript/#callout-dropdowns-data-required )

Here's a reproduction of the solution. (right anywhere click to see the dropdown menu)

HTML markup

<div class="wrapper">
    <span data-toggle="dropdown"></span>
    <ul class="dropdown-menu" id="menu">
        <li><a href="#">Download file</a></li>
        <li><a href="#">Upload file</a></li>
    </ul>
</div>

Javascript

//context menu for orders table
$(document).on("contextmenu", "body", function (event) {
    //we won't show the default context menu
    event.preventDefault();

    //showing it close to our cursor
    $('#menu').dropdown('toggle').css({
        top: (event.pageY) + "px",
        left: (event.pageX) + "px"
    });
});

score 4 · Answer 2 · answered Sep 08 '15 at 12:50

Opening in Javascript does not work well with data-toggles. I once used this code to activate the dropdown from Javascript:

$(document).on("contextmenu", "body", function (event) {
    //we won't show the default context menu
    event.preventDefault();

    //showing it close to our cursor
    $('#menu').css({
        top: (event.pageY) + "px",
        left: (event.pageX) + "px"
    }).show();

    $(document).on('click.contextmenu', function () {
         $('#menu').hide();
         $(document).off('click.contextmenu');
    });
});

score 0 · Answer 3 · answered Sep 08 '15 at 16:20

I have added a listener on the mouse up to close it without closing it when you click inside, so it closes just when you want or when you click outside it: http://jsfiddle.net/q6po6jzh/1/

$(document).mousedown(function (e) {
  var container = $("#menu");

  if (!container.is(e.target) && container.has(e.target).length === 0 && container.parent().hasClass('open')) {
      container.dropdown('toggle')
      container.parent().removeClass('open');
  }
});

But if you want to be closed as well when clicked in it I guess @wero answer is probably better.

Still you have to do it manually and that's what I was trying to avoid. — Alvaro, Sep 09 '15 at 09:01

score 0 · Answer 4 · edited Mar 08 '18 at 14:30

0

This will solve your issue. It will close all opened dropdowns.

$('.in,.open').removeClass('in open');

Reference: https://stackoverflow.com/a/22632931/6488619

edited Mar 08 '18 at 14:30

Joe

41,484
20
104
125

answered Nov 08 '16 at 07:55

Muhammad Ahsan

249
4
13

Bootstrap dropdown-menu doesn't get close when clicking an element

4 Answers4

Linked