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

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

123705_UP3v_3549294.png

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值