ブートストラップ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> 

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

Answer 1

は

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

にコード

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

を変更

、それが動作します。 fiddleを更新しました。