正文
select下拉框插件(转)
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li{ margin:0; padding:0; font-size:13px;}
ul,li{list-style:none;}
.div-select{position:relative; }
.div-select cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal;
padding-left:4px; padding-right:30px; border:1px solid #333333;
background:url(xjt.png) no-repeat right center;}
.div-select ul{width:184px;border:1px solid #333333; background-color:#fff; position:absolute; z-index:10; margin-top:-1px; display:none;}
.div-select li{height:24px; line-height:24px;}
.div-select li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}
.div-select li a:hover{background-color:#CCC;}
</style>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
//改写div模拟下拉菜单jquery插件 基本结构微动, id改成类名,原主方法不懂只是改写下
$.fn.divSelect = function(){
return this.each(function(index){
var $this = $(this),
$cite = $this.find("cite"),
$list = $this.find("ul"),
$input = $this.find(".div-input"); $this.on("click","cite",function(){
$list.is(":hidden") ? $list.slideDown("fast") : $list.slideUp("fast");
return false
});
$list.on("click","a",function(){
var $this = $(this);
$cite.text($this.text());
$input.val($this.attr("selectid"));
$list.hide();
return false
});
$(document).on("click.select"+index,function(){
$list.hide();
});
})
}; $(function(){
//调用 支持jquery连缀语法
$(".div-select").divSelect();
});
</script>
</head> <body style="padding: 50px;">
<form action="" method="post">
<div class="div-select">
<cite>请选择特效分类1</cite>
<ul>
<li><a href="javascript:;" selectid="1">导航菜单1</a></li>
<li><a href="javascript:;" selectid="2">焦点幻灯片1</a></li>
<li><a href="javascript:;" selectid="3">广告代码1</a></li>
<li><a href="javascript:;" selectid="4">网页特效1</a></li>
<li><a href="javascript:;" selectid="5">jquery 特效1</a></li>
</ul>
<input name="" type="hidden" value="" class="div-input"/>
</div>
<br/><br/>
<div class="div-select">
<cite>请选择特效分类2</cite>
<ul>
<li><a href="javascript:;" selectid="1">导航菜单2</a></li>
<li><a href="javascript:;" selectid="2">焦点幻灯片2</a></li>
<li><a href="javascript:;" selectid="3">广告代码2</a></li>
<li><a href="javascript:;" selectid="4">网页特效2</a></li>
<li><a href="javascript:;" selectid="5">jquery 特效</a></li>
</ul>
<input name="" type="hidden" value="" class="div-input"/>
</div>
</form>
</body>
</html>