下拉列菜单,是以列表格式显示链接的上下文菜单。下拉列菜单选择后,是打开超链接的新页面,此处要清楚与上篇中选择框的区别。下拉列菜单可以单独使用,但更多的配合导航栏使用。下面是下拉列菜单用到的几种样式:
.dropdown:指定下拉菜单整体样式,下拉菜单都包裹在 .dropdown 里,与之相反的是.dropup
.dropdown-toggle:指下拉列点击按钮样式,按钮内常含<span class="caret"></span>尖角符号
.dropdown-menu:指创建下拉菜单,为ul元素;其中其子元素格式为<li><a></a></li>
.dropdown-header:下拉菜单中添加标题,为li元素
.divider:下拉菜单中的分割线,为li元素
.disabled:下拉菜单中的禁用项,为li元素
演示代码:
<body>
<div class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-globe"></span> 技术文档
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="margin: 0px;">
<li class="dropdown-header">搜索引擎</li>
<li>
<a href="https://www.baidu.com" target="_blank">百度</a>
</li>
<li>
<a href="#">谷歌</a>
</li>
<li class="disabled">
<a href="#">我被禁用了,不可点击</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">前端框架</li>
<li>
<a href="#">Bootstrap</a>
</li>
</ul>
</div>
</div>
</body>
<script>
$(".dropdown").click(function(e) {
var target = e.target;
if($(target).attr("data-toggle") != undefined) {
e.preventDefault();
e.stopPropagation();
}
});
$('.dropdown').mouseover(function() {
$(this).addClass('open');
}).mouseout(function() {
$(this).removeClass('open');
});
</script>
效果图:
(注).glyphicon表示字体图标。
(注)下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单,如$(".dropdown-toggle").dropdown('toggle')。
当下拉列菜单除了单独使用外,在实际还会配合导航栏一起使用时,此时它的结构通常如下:
<ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-globe"></span> 中国站
<span class="caret"></span>
</a>
<ul class="dropdown-menu>
<li>
<a>中国站</a>
</li>
<li>
<a>International - English</a>
</li>
<li>
<a>繁体中文</a>
</li>
<li>
<a>日本サイト</a>
</li>
</ul>
</li>
<li></li>
<li></li>
</ul>