代码如下：
1 ;(function ($, window) { 2 $.fn.addSelect = function (options) { 3 4 //合并传入与默认的参数 5 var opts = $.extend({}, $.fn.addSelect.defaultOpts, options || {}); 6 //实现方法 7 $(this).each(function () { 8 9 var _that = $(this); 10 // 获取下拉内容容器 11 var searchContentContain = _that.find(opts.searchContentContain).length > 0 ? 12 _that.find(opts.searchContentContain) : _that.children(":last"); 13 searchContentContain.addClass("jsSpecialControlSlideNavigationContain"); 14 //赋值容器 15 var changeValue = _that.find(opts.getValueClass); 16 //触发箭头 17 var _triggerArrow = _that.find(opts.triggerElement); 18 var _triggerElement = null; 19 // 扩展点击区域，那么触发对象就是下拉三角的父元素，否则就只有下拉三角是触发下拉元素 20 if (opts.extendTrigger) { 21 _triggerElement = _triggerArrow.parent(); 22 // 增加className extendTriggerClass 23 _triggerElement.addClass("extendTriggerClass").css({ 24 cursor : "pointer" 25 }); 26 } else { 27 _triggerElement = _triggerArrow; 28 } 29 // 绑定下拉事件 30 _triggerElement.bind(opts.mouseType, function (event) { 31 //阻止事件冒泡 32 event.stopPropagation(); 33 //阻止默认事件 34 event.preventDefault(); 35 // 显示或者隐藏下拉内容狂 36 showOrHideSearchContentContain(); 37 }); 38 39 function showOrHideSearchContentContain() { 40 if (searchContentContain.is(":hidden")) { 41 // 其他下拉框隐藏 42 $(".jsSpecialControlSlideNavigationContain").hide(); 43 // 显示当前点击的那个下拉内容容器 44 searchContentContain.show(); 45 _triggerArrow.addClass("sp_mousedown_plus"); 46 } else { 47 // 隐藏下拉内容容器 48 searchContentContain.hide(); 49 _triggerArrow.removeClass("sp_mousedown_plus"); 50 }; 51 } 52 // 绑定文档事件 53 $(document).bind("click", function (event) { 54 // 获取当前的点击元素 55 var _target = $(event.target); 56 // 隐藏元素 57 searchContentContain.hide(); 58 }); 59 60 // 为内容导航容器的子元素绑定事件 61 searchContentContain.children().each(function () { 62 $(this).hover(function () { 63 $(this).addClass(opts.addHoverClass).siblings().removeClass(opts.addHoverClass); 64 }, function () { 65 $(this).removeClass(opts.addHoverClass); 66 }); 67 $(this).click(function () { 68 var value = $(this).text(); 69 changeValue.text(value); 70 searchContentContain.hide(); 71 opts.callBack != null ? opts.callBack(value, $(this), changeValue) : ""; 72 }); 73 }); 74 75 }); 76 } 77 /* 78 * 默认参数 79 * triggerElement 触发事件的元素 80 * mouseType 触发的事件类型 81 * extendTrigger 是否扩展， 布尔值，默认为false,备选参数，true 82 * searchContentContain 下拉框容器对象 参数为id 或者class 83 * addHoverClass 下拉框容器鼠标滑过时添加的类名 参数为不带"." 的class 84 * getValueClass 获得新值得容器对象 参数为id或者class 85 * callBack 回调函数,会返回当前获取的值 86 */ 87 $.fn.addSelect.defaultOpts = { 88 triggerElement : ".sp_mousedown", // className 或者id 或者元素选择器 89 mouseType : "click", // 鼠标事件 90 extendTrigger : false, // 布尔值，默认为false,备选参数，true 91 searchContentContain : ".search_con_nav", // className 或者id 或者元素选择器 92 getValueClass : ".sp_gain_value", // 注意此参数带 "."或者"#" 93 addHoverClass : "dd_hover", // 注意此参数不带 "."且必须是class名 , 94 callBack : null 95 }; 96 })(jQuery, window);
如此使用的:
1 $(".fd-form-select").addSelect({ 2 triggerElement : ".fd-form-select-mousedown", // className 或者id 或者元素选择器 3 mouseType:"click", // 鼠标事件 4 extendTrigger : true, // 布尔值，默认为false,备选参数，true 5 searchContentContain : ".fd-form-select-con", // className 或者id 或者元素选择器 6 getValueClass : ".fd-form-select-value" ,// 注意此参数带 "."或者"#" 7 addHoverClass : "hover" ,// 注意此参数不带 "."且必须是class名 8 callBack:function(value){ 9 console.log(value); 10 //回调函数输出值 11 12 } 13 });