码迷,mamicode.com
首页 > 其他好文 > 详细

37 bootstrap——小例子:下拉框

时间:2020-02-09 16:54:02      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:highlight   body   UNC   ext   doctype   src   tle   event   nbsp   

效果先看

技术图片

知识点

bootstrap下拉框由div>button ul>li>a 构成

div的类为:dropdown

a标签必须写

button的类为: dropdown-toggle 必带属性:data-toggle="dropdown"

ul的类为:dropdown-menu

获取事件触发的对象为:event.target

 

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉框</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		
		<div id="" class="dropdown">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">切换</button>
			<ul class="dropdown-menu">
				<li><a href="javascrip:void(0)">嘻嘻</a></li>
				<li><a href="javascrip:void(0)">哈哈</a></li>
				<li><a href="javascrip:void(0)">吼吼</a></li>
			</ul>
		</div>
		<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var btn = $(".dropdown-toggle");
			var ul = $(".dropdown-menu");
			ul.click(function(){
				btn.html(event.target.innerHTML);
			})
		</script>
	</body>
</html>

  

37 bootstrap——小例子:下拉框

标签:highlight   body   UNC   ext   doctype   src   tle   event   nbsp   

原文地址:https://www.cnblogs.com/Scorpicat/p/12287398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!