Bootstrap下拉菜单的认识误区

Bootstrap下拉菜单HTML有两种写法：

一、内置式：

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>

二、外围式：

<button class="btn btn-primary" data-toggle="dropdown" data-target="#dp">
    下拉菜单<span class="caret"></span>
</button>
<div class="dropdown" id="dp">
    <ul class="dropdown-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>

外围式的按钮必须指明data-target属性，该属性前必须带#号，其ID值必须是class为dropdown的外层div的ID，如果写到弹出部分ul.dropdown-menu上的话，菜单无法弹出。内置式可加可不加data-target属性，如果加就一定要按外围式的要求加，否则也会弹不出来

另外  :  JS写法不推荐，容易出问题