您的位置：首页 > Web前端 > JQuery

jQuery模拟的简单的select下拉菜单

2012-04-12 10:44 375 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery模拟select标签</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("#select").click(function(){

$(".option").toggle();

});

$(".option li").click(function(){

$("#select").text($(this).text());

$(".option").hide();

});

$(".option li").hover(function(){

$(this).addClass("hover")

},function(){

$(this).removeClass("hover")

});

});

</script>

<style>

*{ margin:0; padding:0;}

ul,li { list-style: none; }

#select { position:relative; width:96px; height:28px; line-height:28px; color:#7da1bb; padding-left:14px; background:url(http://www.w3cfuns.com/data/attachment/album/201203/26/1133367lvvy4n1418z6o8r.jpg) no-repeat; }

.option { display:none; width:108px; border:1px solid #ACBABD; position:absolute; left:0; top:28px; }

.option li { color:#7da1bb; border-bottom:1px solid #ACBABD; line-height:28px; padding:0 14px; }

.option li.hover { background:#316AC5; color:#FFF; }

</style>

</head>

<body>

<div id="select">选择城市</div>

<ul class="option">

<li>北京</li>

<li>上海</li>

<li>深圳</li>

</ul>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航