Bootstrap 4 - dropdown 按第一次沒反應，要第二次以後才正常

最近的案子是寫一個簡單的後台讓丟案公司透過此後台來修改或公告一些東西，我就用 jQuery 3 + Bootstrap 4 再加上網路上找到免費的 dashboard 網頁來做 view …

剛好正在做 dashboard 右上角有關登入角色資訊，點擊後會有下拉選單可以點選一些資料或登入的操作，正在試做時發現原則上網頁產生過程是沒問題的，但就是那個資訊要點出下拉選單時，第一次點擊總是沒有反應，第二次以後的操作都正常…狀況如下

可以看到我第一次點「管理者」時，底色是有變暗，這代表我有「click」下去，但下方的選單沒有展開，第二次再點就正常…使用 chrome 的「開發人員工具」看反饋資訊，console 是沒有報錯的。



然後在網路上搜尋「bootstrap 4 dropdown twice click」的相關資訊，發現是有一樣狀況的，也有回應的人寫說可以增加「data-target="id"」在那個要被點的屬性中，「id」可以建立在「dropdown-menu」的東西的屬性中，如下：

                    
<nav class="navbar navbar-expand-lg navbar-expand-md">
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle h6" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false" style="color: white;" data-target="#drop">
                    管理者
                </a>
                <div id="drop" class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="profile.html">Profile</a>
                    <a class="dropdown-item" href="login.html">Logout</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

我標紅色字的就是我上面寫的，這樣做是第一次點擊會正常，但…點出來後的選單就無法再用點擊叫它消失，只能在網頁其他地方點一下才會取消 focus 狀態…解決一個又產生一個問題。

然後再繼續 google 看文，我發現了有幾個人的回答都是說「可能是多次載入了 bootstrap.js 的關係，所以這個一些功能產生了衝突」！！！呃，我很確定 bootstrap.min.js 我只載入了一次，我並沒有多次或我把 bootstrap.js 也載入了呀…不過我看到我有多載了 bootstrap.bundle.min.js 。

我後來就去找了「bootstrap」跟「bootstrap.bundle」有啥差別，在「這邊」有說明，原則上兩則在「核心」是一樣的，只是「bootstrap.bundle」並沒有包進「popper.js」的程式碼，「popper.js」是一個不需要 jQuery 就能完成 tooltip 的輕量程式，所以，原來我的問題確實是「重複載入 bootstrap 而造成衝突」。

解決了！！！