Bootstrap下拉菜单

下拉菜单概述

下拉菜单使用了bootstrap里的data-*属性声明式触发，将所有的数据使用最外层容器dropdown包含，按钮指定dropdown-toggle样式，并声明data-toggle属性为dropdown，下拉菜单使用dropdown-menu来包含，即可实现下拉菜单

<div class="container">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-target="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
    <ol class="dropdown-menu">
        <1--指定下拉菜单的标题-->
        <li class="dropdown-header">前端</li>
        <li><a href="javascript:void(0)">HTML</li>
        <!--设置分割线-->
        <li class="divider" style="background:grey;"></li>
        <li><a href="javascript:void(0)">JS</li>
        <!--设置分割线-->
        <li class="divider" style="background:grey;"></li>
        <li><a href="javascript:void(0)">CSS</li>

实现效果

获取选中的下拉菜单的值

为li标签元素指定click事件绑定，当某个li被点击时，就获取其对应的value值