37 bootstrap——小例子：下拉框

效果先看

知识点

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>

　　

posted @ 2020-02-09 15:55  Scorpicat  阅读(180)  评论(0)  编辑  收藏  举报