章节
问答
课签
笔记
评论
占位
占位

下拉菜单(菜单项状态)

下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)焦点状态(:focus)

/*查看bootstrap.css文件第3049行~第3054行*/

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

下拉菜单项除了上面两种状态,还有当前状态(.active)禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    ….
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>

运行效果如下:

对应的样式代码也非常简单:

/*请查看bootstrap.css文件第3055行~第3075行*/

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #428bca;
  outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

任务

我来试试:完成下面任务

编写代码实现下拉菜单,效果图:

?不会了怎么办

参考代码:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" 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="#">苹果</a></li>
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
  </ul>
</div>
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 绝尘kinoko
类名disabled是bootstrap封装的一个类,不引入bootstrap的css就无法使用disabled = true / false,这个是js代码,true代表禁用,false代表可用写在HTML标签里的disabled和disabled="disabled"是一个意思,禁用不是所有的标签都可以用disabled。我不太清楚bootstrap里用到disabled类名的有哪些地方,边学边掌握;原生的里面应该就表单组件有这个属性。

已采纳回答 / 飘_JimmyLee
ul 标签加 style="background-color:black;"

最新回答 / 慕娘5956550
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 这两行代码换成<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></...

已采纳回答 / 源8023
有Aria前缀的都是无障碍阅读,即方便屏幕阅读器获取内容,当input聚焦时aria-label就会获取与之相关联的label的内容,当label中的内容在其他元素中出现过,则使用aira-lebelledby来获取相关的值

已采纳回答 / 傻兔子_
<span class="caret"></span> 是那个小箭头图标

最新回答 / 夜空中最亮的星光
楼上说的对,这是一个超链接,转到你想要到达的页面

最赞回答 / andy_yb
你是指下拉框中的文字内容需要显示在框中吗?请仔细体会和区分  表单控件(下拉选择框select)  和  下拉菜单(基本用法)一个是以内容为主,一个是以链接为主。当然你要那样做也可以。没有问题。想得到当然能做的到。

已采纳回答 / 示申言舌
role是自定义的一个属性,没很大意义,但不排除有可能是bootstrap用来作样式使用,例如样式中写了个 a[role="tab"]{ width:300px; } 而刚好你的a元素里没有role="tab",则这个width:300px不生效,另一个tabindex是针对键盘tab键的,假设tab=1 ,当你按tab键事,光标将停留在这个元素上

已采纳回答 / 恰北北
选中的内容是链接,你可以添加切换到的页面,也可以通过点击事件达到某种作用。这里只是给展现下拉菜单的样式,点击之后的操作可以自己写。

+ 我来回答 回答最高可+2积分

最新回答 / purple_yao
role是html5新加入的属性目的是为了使用搜索引擎或屏幕阅读器识别标签的目的。

最新回答 / BlueRainning
focus就是焦点的意思,就是鼠标定焦的地方!
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言