简单下拉框模拟

最新推荐文章于 2021-06-04 10:55:31 发布

iteye_12132

最新推荐文章于 2021-06-04 10:55:31 发布

阅读量242

点赞数

分类专栏： CSS 文章标签： css 下拉模拟

CSS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏



<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript" src="lib/jquery.js"></script>
<style type="text/css">


/*下拉模拟*/
.simSelect { display:inline-block;position: relative;border: 1px solid #ccc; line-height: 34px;text-align:center; }
.simSelect:after{position: absolute;top:50%;margin-top:-4px;right:1px;border: 9px solid transparent;border-top: 8px solid #999;width: 0; height: 0;  content: '';}
.simSelect .selected { padding: 0 2em;margin:0; height: 34px; overflow: hidden; cursor: default;}
.simSelect.hover .dropDownGroup{display:block;}
.simSelect ul,.simSelect li{list-style-type:none;margin:0;padding:0;}
.simSelect a {text-decoration: none;}
.simSelect .dropDownGroup { display: none; position: absolute; width:100%;top:-1px;left:-1px;z-index: 5; background: #fff; border: 1px solid #ccc;}
.simSelect .dropDownGroup li { list-style-type:none;cursor: default; height: 34px; line-height: 34px; }
.simSelect .dropDownGroup a { display: block; line-height: 34px; padding: 0 15px; color: #3a3a3a; }
.simSelect .dropDownGroup a:hover{color:#2c8fd2;}
.simSelect .dropDownGroup .select,
.simSelect .dropDownGroup a:hover { background: #e8e8e8; }

</style>
</head>

<body>
<div id="imagePreview" style="margin:100px auto;width:500px;">
				<div class="simSelect">
        			<p class="selected" data-val="1">1张</p>
        			<ul class="dropDownGroup">
        				<li class="selOpt" data-val="1"><a href="javascript:;">1张</a></li>
        				<li class="selOpt" data-val="2"><a href="javascript:;">2张</a></li>
        				<li class="selOpt" data-val="3"><a href="javascript:;">3张</a></li>
        			</ul>
    			</div>
</div>


<script>
$(function(){
	$(document.body).on('mouseenter','.simSelect',function(){
		$(this).addClass("hover");
	}).on('mouseleave','.simSelect',function(e){
		$(this).removeClass("hover");
	}).on('click','.simSelect .selOpt',function(){
		var el = $(this),
			target = el.parent().prev(".selected");
		target.attr("data-val",el.attr("data-val"));
		target.text(el.text());
		el.closest(".simSelect").removeClass("hover");
	});
})
</script>
</body>
</html>

iteye_12132

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单下拉框模拟

[code="html"]Image preview example /*下拉模拟*/.simSelect { display:inline-block;position: relative;border: 1px solid #ccc; line-height: 34px;text-align:center; }.simSelect:afte...
复制链接

扫一扫