div模拟select点击空白地方隐藏div（就是阻止事件冒泡，兼容ie）

最新推荐文章于 2020-07-30 14:47:53 发布

hangGe0111

最新推荐文章于 2020-07-30 14:47:53 发布

阅读量746

点赞数

分类专栏： js 文章标签：模拟select 阻止事件冒泡兼容ie

本文链接：https://blog.csdn.net/hangGe0111/article/details/81740358

版权

本文介绍如何利用div元素模拟select下拉框，并在点击页面空白区域时隐藏div。重点在于解决阻止事件冒泡的问题，确保在IE浏览器上的兼容性。

摘要由CSDN通过智能技术生成

1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}	
			li{
				list-style: none;
			}	
			.check{
				border: 1px solid #000;
				width: 80px;
				text-align: center;
			}	
			.list{
				width: 100px;
				background-color: #fff;
				border: 1px solid #000;
				display: none;
			}
			.list li,.check{
				cursor: pointer;
				padding: 10px;
				height: 30px;
				line-height: 30px;
			}
			
			.list li:hover{
				background-color: rgba(0,0,0,0.5);
				color: orange;
			}
		</style>
	</head>
	<body>
		<div class="check">请选择</div>
		<ul class="list">
			<li>我是li1</li>
			<li>我是li2</li>
			<li>我是li3</li>
		</ul>
		<script src="https://cdn.bootcss.com/jquery/1.8.3/jque