基于jQuery使用dl标签模拟自定义样式下拉列表
作者：工具松鼠时间：2026-10-25 12:48:12浏览：273
本文介绍一种基于jQuery的封装方案，利用HTML的dl、dt、dd标签模拟实现可自定义样式的SELECT下拉列表。通过扩展jQuery.fn，提供展开、收缩动画及鼠标交互逻辑，支持配置样式类名与时间参数，旨在为开发者提供轻量级的下拉菜单解决方案。
jQuery dl模拟select下拉列表实现
具体实现思路较为常规，代码内部已包含详细注释。使用方法为调用一个简单的全局函数封装，若需了解细节可查看源码注释或参考相关文档。
感兴趣的用户可尝试在此插件基础上修改，实现支持输入功能的下拉列表，其核心思路相似。
相关演示及完整代码可通过提供的链接查看与下载。
运行代码示例如下：
<!doctype html> <html> <head> <meta charset="gbk"> <title>用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think</title> <style> /*reset css*/ body{font-size:0.8em;letter-spacing:1px;font-family:\5fae\8f6f\96c5\9ed1;line-height:1.8em} div,h2,p,fieldset,legend,span,em,dl,dt,dd{margin:0;padding:0} input{font:12px/1.5 tahoma,arial,sans-serif;vertical-align:middle} h1{font-size:1em;font-weight:normal} h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none} h1 a:hover{background:#a40000;color:#fff;text-decoration:underline} h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative} /*demo css*/ #demo{position:relative;width:500px;height:260px;border:1px solid #ccc} #demo dl.tips{margin:2px;padding:8px;background:#f2f2f2;line-height:24px} #demo dl.tips dt{font-size:14px;font-weight:bolder} #demo dl.tips dd{text-indent:24px} #demo .demo_b{top:180px;margin-left:-90px;z-index:888} #demo .demo_c{top:220px;margin-left:-60px;z-index:777} .selectitem{position:absolute;top:140px;left:50%;margin-left:-120px;overflow:hidden;width:180px;height:30px;background:#dff0f0;font-size:14px;line-height:30px;filter:alpha(opacity:80);opacity:0.8;cursor:pointer;z-index:999} .selectitem dt,.selectitem dd{padding-left:28px;background:transparent url(http://mrthink.net/demo/images/20101031sprite.png) 30px 0 no-repeat} .selectitem dt.drop{background-position:0 -30px;} .selectitem dt.shrink{background-position:0 0} .selectitem dd.hover{background-color:#b6e2e2} .selectitem dl .tag_news{background-position:0 -60px;color:#bd0000} .selectitem dl .tag_it{background-position:0 -90px;color:#0759E0} .selectitem dl .tag_reading{background-position:0 -120px;color:#409513} .selectitem dl .tag_interests{background-position:0 -150px;color:#EE7D0E} .selectitem dl .tag_career{background-position:0 -180px;color:#000382} .selectitem dl .tag_living{background-position:0 -210px;color:#733900} .selectitem dl .tag_sports{background-position:0 -240px;color:#9B018B} </style> <meta name="author" content="Mr.Think青鸟" /> <meta name="keywords" content="Mr.Think,前端开发,WEB前端,前端技术,前端开发,WEB前端开发,用户体验,网站策划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP爱好者,Bluebirdsky" /> <meta name="description" content="Mr.Think的博客,中文网名青鸟,现专注于WEB前端开发,同时也是一位PHP的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,喜好肉食.这里是我记录知识与生活琐事的地方." /> <link rel="pingback" href="http://mrthink.net/xmlrpc.php" /> <link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink.net/feed/" /> </head> <body> <h1>Mr.Think的个人博客@专注前端技术,热爱PHP,崇尚简单生活.</h1> <h3>返回文章页:用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think</h3> <!--DEMO start--> <div id="demo"> <dl class="tips"> <dt>用dl模拟实现可自定义样式的SELECT下拉列表</dt> <dd>1. 充分考虑用户体验, 快速划过不会触发;</dd> <dd>2. 可根据需求自定义各种样式;</dd> <dd>3. 如果你有兴趣, 你还可以改进成即可输入值又可下拉的下拉列表.</dd> </dl> <div class="selectitem"> <dl> <dt class="shrink">请选择标签类别</dt> <dd class="tag_news">时事 新闻</dd> <dd class="tag_it">技术互联网 新玩意儿 </dd> <dd class="tag_reading">读书 音乐 影视</dd> <dd class="tag_interests">兴趣 爱好 活动</dd> <dd class="tag_career">事业 理财</dd> <dd class="tag_living">生活 情感</dd> <dd class="tag_sports">娱乐 体育</dd> </dl> </div> <div class="selectitem demo_b"> <dl> <dt class="shrink">请选择标签类别</dt> <dd class="tag_news">时事 新闻</dd> <dd class="tag_it">技术互联网 新玩意儿 </dd> <dd class="tag_reading">读书 音乐 影视</dd> <dd class="tag_interests">兴趣 爱好 活动</dd> <dd class="tag_career">事业 理财</dd> <dd class="tag_living">生活 情感</dd> <dd class="tag_sports">娱乐 体育</dd> </dl> </div> <div class="selectitem demo_c"> <dl> <dt class="shrink">请选择标签类别</dt> <dd class="tag_news">时事 新闻</dd> <dd class="tag_it">技术互联网 新玩意儿 </dd> <dd class="tag_reading">读书 音乐 影视</dd> <dd class="tag_interests">兴趣 爱好 活动</dd> <dd class="tag_career">事业 理财</dd> <dd class="tag_living">生活 情感</dd> <dd class="tag_sports">娱乐 体育</dd> </dl> </div> </div> <!--DEMO end--> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
核心代码实现部分：
代码如下：
;(function($){
$.fn.extend({
iSelect: function(options){
var iset = {
name: $('.selectitem'), //容器
select: $('.selectitem>dl'), //dl列表
dropCss: 'drop', //收藏状态dt的样式
shrinkCss: 'shrink', //展开状态dt的样式
hoverCss: 'hover', //鼠标划过dd时的样式
clearTime: 100, //允许用户快速划过不触发的时间(ms)
dropTime: 100, //展开时间(ms)
shrinkTime: 100 //收缩时间(ms)
}
options = options || {};
$.extend(iset, options);
var mainHeight = iset.name.height();//容器高度
var selectHeight = iset.select.height(); //dl实际高度
var curTxt = iset.select.find('dt').html(); //dt默认html内容
var self = null;
var hoverElem = null; //避免用户快速划过时触发事件
iset.name.each(function(){
$(this).hover(function(){
self = this;
hoverElem = setTimeout(function(){
$(self).stop(true, false).animate({ //鼠标划过时,展开dl
height: selectHeight
}, iset.dropTime);
if ($(self).find('dt').html() == curTxt) { //判断是否有选择下拉列表,若无则改变dt样式
$(self).find('dt').attr('class', iset.dropCss);
}
//dd的鼠标事件
$(self).find('dd').mouseover(function(){
$(this).addClass(iset.hoverCss).siblings().removeClass(iset.hoverCss);
}).mousedown(function(){ //鼠标点击时取值并赋给dt
$(self).find('dt').html($(this).html()).attr('class', $(this).attr('class'));
$(self).stop(true, false).animate({
height: mainHeight
}, iset.shrinkTime);
}).removeClass(iset.hoverCss);
}, iset.clearTime);
}, function(){
//鼠标移出后触发的事件
clearTimeout(hoverElem);
$(self).stop(true, false).animate({
height: mainHeight
}, iset.shrinkTime);
if ($(self).find('dt').html() == curTxt) {
$(self).find('dt').attr('class', iset.shrinkCss);
}
});
})
}
})
})(jQuery);作者最新文章
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比：哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45
无需安装环境，5款主流JavaScript在线运行工具推荐
2026-11-03 18:23:26
JS怎么将地址栏查询字符串转换为JSON对象
2026-11-03 18:10:29