jQuery模拟select实现下拉菜单功能

前端之家收集整理的这篇文章主要介绍了jQuery模拟select实现下拉菜单功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用jquery模拟一淘上面的搜索下拉的功能,利用css3做箭头的动画效果

JS代码

搜索下拉select * 默认调用方式:$(el).setSelect({ * optionList: [],//这里是下拉的选项,如['aa','bb'] * hiddenInput: '#optionHidden',//隐藏的input获取选中后的值,供表单提交时传值 * getOption: '#sOptionBtn',* callback: function(option){} * }) * */ (function ($) { $.fn.setSelect = function(options){ var opt = $.extend({ optionList: [],getOption: '',hiddenInput: '',callback: function(){} },options || {}); return this.each(function(){ opt._id = this; var _time; var arrow = $(this).find('i'); $(opt._id).append('
    '); for(var i=0;i'+opt.optionList[i]+'') }; $(opt._id).bind({ mouseenter: function(){ $(arrow).addClass('arrow-hover'); $('#selectList').slideDown(); clearTimeout(_time); },mouseleave: function(){ _time=setTimeout(function(){ $(arrow).removeClass('arrow-hover'); $('#selectList').slideUp() },300); } }); //获取选择的值 $('#selectList').delegate('li','click',function(){ var option = $(this).text(); $(opt.getOption).text(option); $(opt.hiddenInput).val(option); $('#selectList').slideUp(); return opt.callback(option); }); }); } })(jQuery);

demo:(只有在高级的chrome及firefox下才能看到CSS3动画效果)

截个图:

代码

<Meta http-equiv="Content-type" content="text/html charset=utf-8">
搜索

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/47747.html

猜你在找的jQuery相关文章