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");

默认效果：