响应式前端框架Bootstrap系列（6）下拉列菜单

最新推荐文章于 2021-12-16 18:42:05 发布

黄泽平

最新推荐文章于 2021-12-16 18:42:05 发布

阅读量1.9k

点赞数 2

分类专栏： bootstrap3 前端集合 Bootstrap入门系列及组件归纳应用文章标签： Bootstrap

本文链接：https://blog.csdn.net/zeping891103/article/details/79040898

版权

前端集合同时被 3 个专栏收录

153 篇文章 10 订阅

订阅专栏

bootstrap3

20 篇文章 2 订阅

订阅专栏

Bootstrap入门系列及组件归纳应用

20 篇文章 2 订阅

订阅专栏

下拉列菜单，是以列表格式显示链接的上下文菜单。下拉列菜单选择后，是打开超链接的新页面，此处要清楚与上篇中选择框的区别。下拉列菜单可以单独使用，但更多的配合导航栏使用。下面是下拉列菜单用到的几种样式：

.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>

黄泽平

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
响应式前端框架Bootstrap系列（6）下拉列菜单

下拉列菜单，是以列表格式显示链接的上下文菜单。下拉列菜单选择后，是打开超链接的新页面，此处要清楚与上篇中选择框的区别。下拉列菜单可以单独使用，但更多的配合导航栏使用。下面是下拉列菜单用到的几种样式：.dropdown：指定下拉菜单整体样式，下拉菜单都包裹在 .dropdown 里，与之相反的是.dropup.dropdown-toggle：指下拉列点击按钮样式，按钮内常含尖角符号.dr
复制链接

扫一扫

专栏目录