具体思路就不说了,比较常规, 代码中也有注释. 使用方法也不费话了, 就是一个简单的全局函数封装, 不懂的看下源码中注释或Google .
另外, 有兴趣的朋友,可以尝试在本插件基础上改一个可输入的下拉列表. 思路差不多,哈.
演示及代码: 演示代码 代码下载
运行代码:
[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);
您可能感兴趣的文章:
- jQuery模拟select实现下拉菜单功能
- jquery使用ul模拟select实现表单美化的方法
- 用jQuery模拟select下拉框的简单示例代码
- jquery模拟SELECT下拉框取值效果
- 使用CSS和jQuery模拟select并附提交后取得数据的代码
- jQuery Select(单选) 模拟插件 V1.3.62 改进版
- JQuery SELECT单选模拟jQuery.select.js
- jQuery模拟实现的select点击选择效果【附demo源码下载】
