下拉菜单

发布时间：2020-12-17 21:02:14 所属栏目：安全来源：网络整理

导读：有的时候我们需要进行实现下拉菜单。实现下拉菜单我们需要引用一个类，或这是一个组件，我们为div class=""给class赋值的是一个属性，也是一个对js里面组件的一个引用。比如当我们要使用的是下拉菜单，于是我们要应用的是下拉组件可以在最外面的块中使用clas

有的时候我们需要进行实现下拉菜单。实现下拉菜单我们需要引用一个类，或这是一个组件，我们为<div class="">给class赋值的是一个属性，也是一个对js里面组件的一个引用。比如当我们要使用的是下拉菜单，于是我们要应用的是下拉组件可以在最外面的块中使用class="dropdown",然后创建一个button，这个button的属性是dropdown-toggle，并且设置data-toggle=“dropdown”,当设置了这两个属性之后，我们可以设置的就是下拉菜单中每一个选项，此时的ul的属性class设置为dropdown-menu，role=“menu”，还有一个属性是aria-labelledby这个是等于上面的button的id，最后我们设置每一个li，并且li的role=“presentation”，<li>的里面是一个链接，链接的属性我们设置为menuitem，表示是下拉菜单里面的项。，最后我们也可以设置分割线:<li role="presentation" class="divider"></li>

源程序:

<!DOCTYPE html> <html> <head> ? ? <meta charset="utf-8"> <title>Bootstrap实例</title> ? ? <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> ? ?<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> ? ?<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> ?</head> ?<body> ?<div class="dropdown"> ?<button type="button" class="btn dropdown-toggle" id="dropdownMenul" data-toggle="dropdown"> ?<span class="caret"></span>主题 ?</button> ? ? <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenul"> ? ? <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> </body> </html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!