【前端开发】bootstrap框架：下拉菜单

下拉菜单

如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可

• dropdown类：指定下拉菜单，下拉菜单都包裹在 .dropdown 里
• dropdown-toggle类：定义类名，标明为下拉列表
• data-toggle属性：折叠效果，标明了后面下拉数据的切换是为哪个class服务的，是和最外容器类名一致
• dropdown-toggle和自定义data-toggle属性，且值必须和最外容器类名一致
• 当想要的标签文本已在其他元素中存在时，可以使用aria-labelledby，并将其值为所有读取的元素的id。如下：
  当ul获取到焦点时，屏幕阅读器是会读：“主题”
• aria-label ：正常情况下，form表单的input组件有对应的label，当input组件获取焦点时，屏幕阅读器读出相应的label里的文本
• 如果一个元素同时有aria-labelledby和aria-label，读屏软件会优先读出aria-labelledby的内容
• .dropdown-menu：创建下拉菜单
• .dropdown-menu-right ：下拉菜单右对齐
• .dropdown-header：下拉菜单中添加标题
• .dropup：指定向上弹出的下拉菜单
• .disabled：下拉菜单中的禁用项
• .divider ：下拉菜单中的分割线

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>