關於js點擊空白處關閉當前彈窗,ul.li模擬select

時間 2019-11-25

標籤關於點擊空白關閉當前 ul.li 模擬 select 欄目 JavaScript 简体版

原文原文鏈接

1.先上代碼css

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
	<div class="box">
		<span style="float: left;line-height: 30px;margin-right:10px;">請選擇</span>
		<label for="" class="label">
		<p class="ed">sdddddd</p>
		<ul class="select">

			<li>3444444334541</li>
			<li>3444444334542</li>
			<li>3444444334543</li>
			<li>3444444334546</li>
			<li>3444444334546</li>
			<li>3444444334546</li>
			<li>3444444334546</li>
			<li>3444444334546</li>
			<li>3444444334546</li>
			<li>3444444334546</li>
			<li>3444444334546</li>
			<li>3444444334546</li>
			<li>3444444334546</li>
			<li>3444444334546</li>
			<li>3444444334546</li>
			<li>3444444334547</li>
			<li>3444444334548</li>
		</ul>
		</label>
	</div>

	<script>
		$('.ed').click(function() {
			$('.select ').slideToggle();
		});

		$('.select li').click(function() {
			var text = $(this).text();
			$('.ed').text(text);
			$('.select ').hide();
		})

		$(document).click(function(e) { //點擊空白處關閉當前彈窗
			var _con = $('.label'); // 設置目標區域
			if (!_con.is(e.target) && _con.has(e.target).length === 0) {
				$('.select').hide();
			}
		});

	</script>
</body>
<style>
	* {
		margin: 0px;
		padding: 0px
	}

	.box {
		margin: 20px;
		width: 310px;
		position: relative;
	}

	ul li {
		list-style-type: none;
	}

	.ed {
		border: 1px solid #ddd;
		float: left;
		width: 250px;
		cursor: pointer;
		position: relative;
		text-indent: 10px;
		height: 30px;
		line-height: 30px;
	}

	.select {
		float: left;
		width: 250px;
		position: absolute;
		display: none;
		right: 0px;
		top: 30px;
		border: 1px solid #ddd;
		border-top: none;
		text-indent: 10px;
		max-height: 200px;
		overflow: auto;
	}

	.select li {
		height: 30px;
		cursor: pointer;
		line-height: 30px;
	}

</style>

</html>

2.要點：html

01.經過控制‘ul’的顯示隱藏來模擬option，最上邊給個標籤表明已選擇jquery

02.點擊空白處隱藏‘ul’.經過e.target實現ide