在頁面其他地方激活Bootstrap 4下拉菜單

Question

我的網站頂部有一個Bootstrap下拉導航欄。

當我單擊頁面其他位置的鏈接時，我試圖顯示“ helpDropDownMenuLink”下拉菜單。

請有人可以幫我嗎？ 我已經在Bootstrap文檔中閱讀了有關$（）。dropdown（'toggle'）的信息，但是無法使其正常工作..！

非常感謝

<nav class="navbar">
    <div class="container-fluid">
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a id="helpDropdownMenuLink" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link">Help<i class="fa fa-angle-down"></i></a>
                    <div aria-labelledby="helpDropdownMenuLink" class="dropdown-menu dropdown-menu-right">
                        <a href="/link1" class="dropdown-item">Link 1</a>
                        <a href="/link2" class="dropdown-item">Link 2</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="/about" class="nav-link">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

我想這就是您所需要的： JSFiddle

HTML

<button class="btn btn-secondary trigger_button">Trigger dropdown</button><br><br>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
  </button>
  <div class="dropdown-menu">
    Stuff...
  </div>
</div>

JS

$('.trigger_button').click(function(e){
  e.stopPropagation();
  $('.dropdown-toggle').dropdown('toggle');
});