bootstrap中jquery插件——下拉菜單

這篇是用來記錄怎樣爲應用了bootstrap下拉菜單組件的元素引用下拉菜單插件的，其實無論使用bootstrap中哪一個插件都有兩種方式：
一種是直接使用data-*擴展屬性，這是 Bootstrap 中的一等 API，也應該是首選方式。
另一種是使用編程方式的 API，即用寫js的方式來調用插件函數實現效果，一般情況不建議使用這種方式。

下拉菜單插件如果使用JavaScript API的方式來調用的話，可以實現下拉菜單默認展開的效果，所以在想要這種效果的時候可以用這種方式來調用。

應用了組件還沒有使用插件時：

    <div class="dropdown">
        <a id="pro_lsit" href="#" class="btn btn-warning dropdown-toggle">產品列表 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">電視</a></li>
            <li><a href="#">冰箱</a></li>
            <li><a href="#">洗衣機</a></li>
            <li class="divider"></li>
            <li><a href="#">餅乾</a></li>
            <li><a href="#">牛奶</a></li>
        </ul>
    </div>

效果（點擊沒有反應）：

引用插件 只需給 .dropdown>a 標籤添加一個擴展屬性（data-toggle=”dropdown”）：

<a id="pro_lsit" href="#" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">產品列表 <span class="caret"></span></a>

默認效果：
點擊後：

應用了組件 和 編程方式的API方式引用插件（html代碼不變，添加js代碼如下）：

$("#pro_lsit").dropdown("toggle");

默認效果：