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

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

  ? 被點(diǎn)擊的菜單項(xiàng)鏈接或按鈕需要添加自定義屬性 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>

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

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

簡(jiǎn)單的說(shuō)，要制作下拉菜單，其結(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ā)下拉菜單的元素是一個(gè)鏈接元素，為了避免點(diǎn)擊鏈接，頁(yè)面跳到頂部，可以使用data-target="#"來(lái)替代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>