從上一節(jié)的兩個示例，我們可以知道，用戶只需要點擊有向下三角形的按鈕鏈接或者直接點擊三角形就會彈出下拉菜單。實現(xiàn)這個效果，都是依賴于HTML相關(guān)元素自定義的屬性完成。所以在編寫HTML結(jié)構(gòu)的時候必須滿足下面的規(guī)則：

  ? 按照制作菜單的結(jié)構(gòu)編寫結(jié)構(gòu)，如前面“下拉菜單”一節(jié)(5-21)所介紹

  ? 被點擊的菜單項鏈接或按鈕需要添加自定義屬性 data-toggle="dropdown"

<div class="navbar navbar-default" id="navmenu">
    <a href="##" class="navbar-brand">W3cplus</a>
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
                <li role="presentation"><a href="##">CSS3</a></li>
                 ...
            </ul>
        </li>
        <li><a href="##">前端論壇</a></li>
        <li><a href="##">關(guān)于我們</a></li>
    </ul>
</div>

實現(xiàn)下拉菜單原理：

Dropdown插件加載時，對所有帶 有“data-toggle=dropdown”樣式的元素綁定了事件，用戶單擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時， 會觸發(fā)JavaScript事件代碼。當用戶點擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時，下拉菜單的父容器（上面的示例是 “<li class="dropdown">”）會添加一個open類名，此時下拉菜單顯示；再次單擊時，JavaScript會刪除剛添加的open類 名，此時下拉菜單將隱藏。

簡單的說，要制作下拉菜單，其結(jié)構(gòu)基本如下：

<div class="dropdown">
    <a data-toggle="dropdown" href="#">下拉菜單觸發(fā)器</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul>
</div>

如果觸發(fā)下拉菜單的元素是一個鏈接元素，為了避免點擊鏈接，頁面跳到頂部，可以使用data-target="#"來替代href="#"：

<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul>
</div>