具体思路就不说了,比较常规, 代码中也有注释. 使用方法也不费话了, 就是一个简单的全局函数封装, 不懂的看下源码中注释或Google . 另外, 有兴趣的朋友,可以尝试在本插件基础上改一个可输入的下拉列表. 思路差不多,哈. 演示及代码: 演示代码 代码下载运行代码: 用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think /*reset css*/ body{font-size:0.8em;letter-spacing:1px;font-family:5fae8f6f96c59ed1;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} Mr.Think的个人博客 @专注前端技术,热爱PHP,崇尚简单生活. 返回文章页:用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think 用dl模拟实现可自定义样式的SELECT下拉列表 1. 充分考虑用户体验, 快速划过不会触发; 2. 可根据需求自定义各种样式; 3. 如果你有兴趣, 你还可以改进成即可输入值又可下拉的下拉列表. 请选择标签类别 时事 新闻 技术互联网 新玩意儿 读书 音乐 影视 兴趣 爱好 活动 事业 理财 生活 情感 娱乐 体育 请选择标签类别 时事 新闻 技术互联网 新玩意儿 读书 音乐 影视 兴趣 爱好 活动 事业 理财 生活 情感 娱乐 体育 请选择标签类别 时事 新闻 技术互联网 新玩意儿 读书 音乐 影视 兴趣 爱好 活动 事业 理财 生活 情感 娱乐 体育 [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);

　　推荐阅读

　　在JS中最常看到切最容易迷惑的语法(转)

js中大括号有四种语义作用 语义1，组织复合语句,这是最常见的 复制代码 代码如下: if( condition ) { //... }else { //... } for() { //... } 语义2，对象直接量声明 复制代码 代码如下: var obj = { name : 'jac>>>详细阅读

本文标题：基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)

地址：http://www.17bianji.com/kaifa2/JS/25502.html

 1/2    1