Question

求用JS或JQUERY 打开select的下拉列表

Answer 1

知道想要种效
Jquery写
<style>
*{margin:0;padding:0;}
#select{margin:20px auto;width:200px;border:1px solid #ccc;}
#select h1{padding:1px 1px 1px 5px;height:20px;font:12px/20px '宋体';color:#666;cursor:pointer;font-weight:bold;}
#select h1 span{float:right;display:block;width:20px;height:20px;font:inherit;color:#fff;background:#ccc;text-align:center;font-weight:inherit;}
#select li{list-style:none;display:none;}
#select li a{display:block;padding:0 5px;height:20px;font:12px/20px '宋体';color:#666;text-decoration:none;}
#select li a:hover{background:#f5f5f5;color:#f60;}
</style>
<script type="text/javascript">
$(function(){
$('#select').hover(
function(){$('#select > li').show();$('#select > h1').css('border-bottom','1px solid #ccc');},
function(){$('#select > li').hide();$('#select > h1').css('border-bottom','none');})
})
</script>
<ul id="select">
<h1><span>∨</span>仿Select拉菜单</h1>
<li><a href="#">拉列表1</a></li>
<li><a href="#">拉列表2</a></li>
<li><a href="#">拉列表3</a></li>
<li><a href="#">拉列表4</a></li>
<li><a href="#">拉列表5</a></li>
<li><a href="#">拉列表6</a></li>
</ul>