具体思路就不说了,比较常规, 代码中也有注释. 使用方法也不费话了, 就是一个简单的全局函数封装, 不懂的看下源码中注释或Google .
另外, 有兴趣的朋友,可以尝试在本插件基础上改一个可输入的下拉列表. 思路差不多,哈.

演示及代码:  演示代码 代码下载
运行代码:

用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think

/*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}

Mr.Think的个人博客
@专注前端技术,热爱PHP,崇尚简单生活.

返回文章页:用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think

用dl模拟实现可自定义样式的SELECT下拉列表

1. 充分考虑用户体验, 快速划过不会触发;

2. 可根据需求自定义各种样式;

3. 如果你有兴趣, 你还可以改进成即可输入值又可下拉的下拉列表.

请选择标签类别

时事 新闻

技术互联网 新玩意儿

读书 音乐 影视

兴趣 爱好 活动

事业 理财

生活 情感

娱乐 体育

请选择标签类别

时事 新闻

技术互联网 新玩意儿

读书 音乐 影视

兴趣 爱好 活动

事业 理财

生活 情感

娱乐 体育

请选择标签类别

时事 新闻

技术互联网 新玩意儿

读书 音乐 影视

兴趣 爱好 活动

事业 理财

生活 情感

娱乐 体育

/*******************************
* @author Mr.Think
* @author blog http://mrthink.net/
* @2010.10.31
* @可自由转载及使用,但请注明版权归属
*******************************/
;(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);
//使用方法
$(function(){
//默认调用
$('#demo').iSelect();

//传入自定义值的调用 方法
// $('.demo_a')({
// name:$('yourcss'),
// select: $('.yourcss>dl'),
// dropCss: 'yourdrop',
// shrinkCss: 'yourshrink',
// hoverCss: 'yourhover',
// clearTime: 200,
// dropTime: 200,
// shrinkTime: 200
// });
})

[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);