Rumah > Artikel > hujung hadapan web > div+css模拟select下拉框实例代码
div+css模拟select下拉框实例代码
- 零下一度asal
- 2017-06-24 13:08:232712semak imbas
<!DOCTYPE html>
<html >
<head lang="zh">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="lib/jquery-1.11.3.min.js?1.1.11" type="text/javascript"></script>
<style>
.mod_select ul{margin:0;padding:0;}
.mod_select ul:after{
display: block;
clear: both;
visibility: hidden;
height: 0;
content: '';
}
.mod_select ul li{list-style-type:none;float:left;height:24px;}
.select_label{color:#982F4D;float:left;line-height:24px;padding-right:10px;font-size:12px;font-weight:700;}
.select_box{float:left;border:solid 1px #ccc;color:#444;position:relative;cursor:pointer;width:165px;font-size:12px;}
.selet_open{display:inline-block;border-left:solid 1px #ccc;position:absolute;right:0;top:0;width:30px;height:100%;background:url(xjt.png) no-repeat 10px center;}
.select_txt{display:inline-block;padding-left:10px;width:135px;line-height:24px;height:24px;cursor:text;overflow:hidden;}
.option{width:165px;;border:solid 1px #ccc;position:absolute;top:24px;left:-1px;z-index:2;overflow:hidden;display:none;}
.option a{display:block;height:26px;line-height:26px;text-align:left;padding:0 10px;width:100%;background:#fff;}
.option a:hover{background:#aaa;}
</style>
</head>
<body>
<div class="mod_select">
<ul>
<li>
<span class="select_label">sort buy:</span>
<div class="select_box">
<span class="select_txt">1</span><a class="selet_open"><b></b></a>
<div class="option">
<a>1</a>
<a>2</a>
<a>3</a>
</div>
</div>
</li>
</ul>
<input type="hidden" id="select_value" />
</div>
<script>
$(function(){
$(".select_box").click(function(event){
event.stopPropagation();
$(this).find(".option").toggle();
$(this).parent().siblings().find(".option").hide();
});
$(document).click(function(event){
var eo=$(event.target);
if($(".select_box").is(":visible") && eo.attr("class")!="option" && !eo.parent(".option").length)
$('.option').hide();
});
/*赋值给文本框*/
$(".option a").click(function(){
var value=$(this).text();
$(this).parent().siblings(".select_txt").text(value);
$("#select_value").val(value)
})
});
</script>
</body>
</html>
运行效果图：
<br>
Atas ialah kandungan terperinci div+css模拟select下拉框实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html实现的动图之小猫笑脸Artikel seterusnya：想当Web前端开发工程师你需要会什么？