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

电玩女神 2021-09-14 14:04 306阅读 0赞

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

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

效果图：

![SouthEast][]

（注）.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>

[SouthEast]: /images/20210813/743fe44eea5e4c59ba4522ccd6c9f60f.png