4.4.2　分离式下拉菜单

大家在阅读上一小节讲解的组合式下拉菜单的时候，可能会发现，箭头是包含在按钮内部的，即：不管是单击按钮还是箭头，都会触发弹出事件。但是，往往有时候开发人员可能需要按钮和箭头分离的功能，即单击箭头的时候弹出菜单，而单击按钮的时候可以做其他的事情。这就要求我们实现如图4-20所示效果的菜单。

图4-20　分离式下拉菜单运行效果

通过前面学到的知识，我们可以猜想，既然单击事件是通过设置data-toggle="dropdown"和data-target=""来触发执行的，所以完全可以让箭头单独成为一个按钮，而原来的按钮继续保持，这样两个按钮排放在一起，只需要处理按钮间的圆角即可。而在上一节讲解按钮组的时候就已经知道多个按钮间是没有圆角的了。

所以HTML代码就自然产生了。

    <div class="btn-group">
        <button type="button" class="btn btn-danger">保持原来的按钮</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-
                   toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">...</a></li>
            <li class="divider"></li>
            <li><a href="#">...</a></li>
        </ul>
    </div>