Bootstrap 4：使用 javascript 打开下拉菜单

Question

我有一个简单的下拉菜单，如下所示：

<div id="actions" class="dropdown btn-group btn btn-outline-secondary" role="group">
  <div id="actionToggle" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    toggle
  </div>
  <div class="dropdown-menu" role="menu" aria-labelledby="actionToggle">
    <div class="dropdown-header">Actions ...</div>
    <a href="#" class="dropdown-item" name="action1">Action 1</a>
    <a href="#" class="dropdown-item" name="action2">Action 2</a>
    <a href="#" class="dropdown-item" name="action3">Action 3</a>
  </div>
</div>

如文档中所述，可以使用 JavaScript 打开下拉菜单。例如，使用dropdown("toggle")Jquerys onDomready 中的方法将在页面加载时打开菜单。以下代码按预期打开菜单：

$("#actionToggle").dropdown("toggle");

但是当我尝试在 Jquery onclick-event 处理程序中使用代码时，它不会打开菜单。这是相同的代码，事件被正确触发。任何想法这里出了什么问题？

$("#open").on("click", function() {
  $("#actionToggle").dropdown("toggle");
});

我要单击的 html 元素如下所示：

<div id="open">text</div>

单击文本应打开菜单，但它不会...

我准备了一个 JSFiddle 来玩代码：https ://jsfiddle.net/3ot08j68/1/

使用了以下库：JQuery 3.2.1、Bootstrap 4.0beta.3、Popper 1.12.9

Answer 1

更改您的代码

$("#open").on("click", function() {
  $("#actionToggle").dropdown("toggle");
});

到

$("#open").on("click", function() {
  $(".dropdown-menu").toggle();
});

它会起作用。我已经更新了你的小提琴。