模拟下拉框，IPAd，iOS不兼容

最新推荐文章于 2022-11-24 14:59:05 发布

Thekingyu

最新推荐文章于 2022-11-24 14:59:05 发布

阅读量792

点赞数

分类专栏：前端样式

本文链接：https://blog.csdn.net/thekingyu/article/details/78493556

版权

前端样式专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.dian-ul {
				display: none;
				width: 100px;
				height: 100px;
				position: absolute;
				left: 0;
				top: 20px;
				
			}
			.dian{
				width: 60px;
			height: 100px;
			display: inline-block;}
		</style>
	</head>
	<body>
		<a href="javascript:void(0)" class="dian"><span class="dianji">选着</span>
			
			<div class="dian-ul">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>4</li>
				</ul>
			</div>		
		</a>		
	</body>
</html>
<script type="text/javascript">
	$(function(){
		$('.dian').focus(function(){
			$('.dian-ul').show()
		}).blur(function(){
				$('.dian-ul').hide()
		})

		
		$('.dian-ul ul li').click(function(e){
			console.log(e)
			if(e.target.tagName == 'LI'){
			  var   lis=$(this).text()	
				console.log(lis)
				$('.dianji').text(lis)	
//				$('.dian-ul').hide()
			}
		$('.dian').blur()
		$('.dian-ul').hide()			
		})		
	})
//				$("#tit span").click(function(){
//				var i=$(this).index()
//				$(this).addClass('yi').siblings().removeClass('yi');
//				$('.tab li').eq(i).show().siblings().hide()
//			})
</script>