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

最新推荐文章于 2022-07-21 16:37:38 发布

load_life

最新推荐文章于 2022-07-21 16:37:38 发布

阅读量670

点赞数

分类专栏： jquery 文章标签： jquery function xhtml border class html

jquery 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何使用jQuery实现模拟Select标签的交互效果，包括点击显示下拉菜单、选择项改变文本并隐藏下拉菜单的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>