# JS Document Ready 後 trigger \<a> 時，dropdown(下拉選單) 壞掉
###### tags: `被玩壞了`

## 情境:
* SPA
* 點選選單的連結時會加上 Hash 作為標示 ( 防止上一頁、下一頁、重新整理的頁面消失問題 )

## 部分 Html

<li>
    <a class="has-arrow" href="#Category_AP" onclick="LoadParitalView(this, 'Category.html');">
        <i class="fas fa-archive fa-lg"></i>&nbsp;AP-助理規劃師
    </a>
    <ul class="mm-collapse">
        <li>
            <a class="has-arrow" href="#Category_AP_EBC"
                onclick="LoadParitalView(this, 'SkillRule.html');">
                <i class="fas fa-book fa-lg"></i>&nbsp;EBC-電子商務及企業電子化概論
            </a>
        </li>
    </ul>
</li>

## JS

$(document).ready(function () {
   // 有可能是重新整理，所以需要依照 hash 讀取 page
        LoadHash();

    // 偵測瀏覽器行為的上一步/下一步來進行畫面更新
    $(window).on('popstate', function (e) {
        LoadHash();
    })
})

function LoadHash() {
        // 如果有 hash 就讀取該頁面至 div page
        if ($(location).prop('hash') != "") {
            $("a[href='" + $(location).prop('hash') + "']").trigger('onclick')
            
            // trigger <a> 之後，下拉選單會壞掉，重新配置... QAQ
            $(".dropdown-toggle").dropdown();
        }
        // 沒有則清空 div page
        else {
            $("#page").empty();
        }
    }

### 解法: trigger之後重新配置 dropdown

$(".dropdown-toggle").dropdown();