关于js点击空白处关闭当前弹窗,ul.li模拟select

最新推荐文章于 2022-07-22 14:20:15 发布

转载最新推荐文章于 2022-07-22 14:20:15 发布 · 526 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3549294/blog/1586813

文章标签：

#javascript #python #ViewUI

本文介绍了一种使用HTML和jQuery实现下拉选择框的方法。通过点击事件触发显示隐藏的选项列表，并允许用户从列表中选择项。同时，该实现还包括了点击页面空白处关闭选项列表的功能。

2019独角兽企业重金招聘Python工程师标准>>>

1.先上代码

<!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.要点：

01.通过控制‘ul’的显示隐藏来模拟option，最上边给个标签代表已选择

02.点击空白处隐藏‘ul’.通过e.target实现

转载于:https://my.oschina.net/u/3549294/blog/1586813