jquery - Bootstrap 4 : open dropdown menu using 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>

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

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

但是当我尝试使用 Jquery onclick 事件处理程序中的代码时，它不会打开菜单。这是相同的代码，并且事件被正确触发。知道这里出了什么问题吗？

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

它会起作用的。我已经更新了你的fiddle .