单击元素时，Bootstrap 下拉菜单不会关闭

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

Answer 1

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"
    });
});

Answer 2

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');
    });
});

Answer 3

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.

Answer 4

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

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

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