Question

我按照in their docs所述的javascript函数dropdown('toggle')触发了引导程序下拉菜单。

每当您点击外部或选择其中一个选项时，通常都会隐藏下拉列表。

通过javascript触发时不会发生这种情况。

在this reproduction中，您会看到两个菜单：

使用＆＃34;组件＆＃34;触发
另一个，使用右键单击，它没有按预期工作。（它不会在外面点击或甚至在元素点击时关闭）

我能够＆＃34;手动＆＃34;使用以下内容在外部单击时删除下拉菜单：

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

但我不太清楚为什么下拉菜单的工作方式与正常程序解雇时相同。并且必须手动隐藏它们似乎不是最好的解决方案......

Answer 1

I got an answer from boostrap issues forum他们解释了如何处理它：

B中。您在<div class="dropdown">
附近错过了<ul class="dropdown-menu">
℃。您错过了data-toggle="dropdown"的元素（未明确记录，但后跟所有示例并与http://getbootstrap.com/javascript/#callout-dropdowns-data-required中的警告相关）

Here's a reproduction of the solution.（任何地方点击查看下拉菜单）

HTML标记

<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

使用Javascript打开对数据切换不起作用。我曾经使用此代码来激活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

我已经在鼠标上添加了一个监听器来关闭它，而不是在你点击它时关闭它，所以只在你想要的时候或当你在它外面点击时关闭它：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');
  }
});

但是如果你想在点击它时也被关闭，我猜@wero答案可能更好。

Answer 4

这将解决您的问题。它将关闭所有打开的下拉列表。

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

参考： https://stackoverflow.com/a/22632931/6488619

单击元素

4 个答案: