昨天做项目的时候发现用select标签写下拉框样式比较丑，和设计师设计的有很大出入，所以就用jQuery实现了一个下拉框，可以修改其样式。
JS Bin - 锐客网
内容一
?
- 内容一
- 内容二
- 内容三
在HTML中关键的就是用ul代替select，然后通过修改ul样式来修改下拉样式。
//这是css代码
#main,#ul{
padding:0px;
width:100px;
list-style-type:none;
margin:0px;
border:1px solid #ccc;
box-shadow:0 0 3px #aaa;
}
#div{
display:none;
}
#ul li:hover{
background-color:#aaa;
}
#content,#tan{
display:inline-block;
}
#tan{
float:right;
}
css代码需要注意的就是倒三角的浮动，虽然在我写的例子中没有太大影响，但是如果你要居中并对齐下面内容，设置浮动是个很好的选择。
//这是js代码
$("#main").click(function(){
if($("#div").css("display")=="none"){//判断下拉还是上拉
$("#tan").text("▼");
$("#div").slideDown();
//设置下拉动画
}else{
$("#tan").text("?");
$("#div").slideUp();
//设置上拉动画
}}
)
function change(e){//把内容写入输入的div中
var a=$(e).text();
$("#content").text(a);
if($("#div").css("display")!=="none"){
$("#div").slideUp();
}
}
//可以在https://jsbin.com/wirapejiwa/edit?html,css,js,console,output中看效果哦！【jQuery下拉框实现】最后应用时发现，如果需要下拉时。下拉框内容不影响表格宽度的话，就需要设定#div定位为绝对定位，再把.select > div的宽度设置下哦！
