js
function:
|
1
2
3
4
5
6
7 |
selectBox:function(){ var
li=$(this); var
selectbox=li.parent().parent(); selectbox.attr("data-checked",li.attr("data-value")); selectbox.children("div").text(li.text()); li.parent().slideUp("fast"); } |
bind:
|
1
2
3 |
$(".selectbox>div").click(function(){$(this).siblings("ul").slideToggle("fast");}); $(".selectbox").children("ul").mouseleave(function(){$(this).slideUp();}) $(".selectbox>ul>li").click(sdk_effects.selectBox); |
html
<div id="num" class="selectbox" data-checked="">
<div>How many users does your app have?</div>
<ul>
<li data-value="1">0-1000</li>
<li data-value="2">1000-10000</li>
<li data-value="3">10000-100000</li>
</ul>
</div>
css
.selectbox{
width:348px;
height:50px;
border:1px solid #C9C9C9;
text-align:left;
font-size:15px;
text-indent:25px;
line-height:50px;
position:relative;
margin-bottom:20px;}
.selectbox>div{
background:urldata:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAYAAADebrddAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABwSURBVChTY2gHgo6Ojv9E4AoGEACqX4pFEo6B8tPACkGgvr6eDSi4F10RCAMVbly1ahUzVCkEtLa2igIlb6MpPNnb28sJVYIK2traVICKXkEVP2lpaZGGSmEHQEVmQBOfA7EuVAg/APqBB8pEAgwMAB7xaYV5lkDCAAAAAElFTkSuQmCC) 315px center no-repeat;
cursor:pointer;}
.selectbox ul{
display:block;
position:absolute;
top:50px;
left:-1px;
list-style:none;
cursor:pointer;
width:100%;
border:1px solid #C9C9C9;
display:none;
z-index:999;
background:#FFF;}
.selectbox ul li{
display:block;
height:50px;}
.selectbox ul li:hover{
background:#CD3333;
color:#FFF;}
[snippet] Select Box,布布扣,bubuko.com
原文：http://www.cnblogs.com/ipup/p/3729776.html