jquery模拟实现仿select效果

页面导航:首页 > 网络编程 > JavaScript > jquery模拟实现仿select效果

jquery模拟实现仿select效果

来源: 作者: 时间:2016-01-22 08:40 【

本着服务为人民的远大理想,最近写了个jquery模拟select效果的小东东,挺好用,分享下。可以直接在我上传的资源里下载压缩包,下载地址:jquery模拟实现仿select效果。首先,上html页面

本着服务为人民的远大理想,最近写了个jquery模拟select效果的小东东,挺好用,分享下。

可以直接在我上传的资源里压缩包,下载地址:jquery模拟实现仿select效果。

首先,上html页面代码

 





省份
  • 北京
  • 河北省
  • 山东省
城市
  • 北京
区/县
  • 海淀区
  • 朝阳区
  • 东城区

 

 

然后,上css代码

 

@charset utf-8;
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,p{margin:0;padding:0; font-family:微软雅黑, Microsoft Yahei, Arial, Helvetica, sans-serif;}
ol,ul{list-style:none;}
.container{ padding-top:100px; margin-left:100px;}

/**
* 模拟select
**/
.select-box { position: relative; float: left; margin-right: 8px; }
.select-city .select-header { width: 88px; height: 36px; border: 1px solid #c1c1c1; padding-right: 26px; background: url(img/arrow.png) no-repeat #f9f9f9; background-position: 95px 15px; line-height: 36px; text-indent: 14px; font-size: 16px; color: #a9a9a9; cursor: pointer; overflow: hidden; }
.select-city .select-arrow { background-position: 95px -9px; }
.select-city .select-content { border-left: 1px solid #c1c1c1; border-right: 1px solid #c1c1c1; position: absolute; top: 38px; left: 0; z-index: 99; display: none; background-color: #f9f9f9; }
.select-city .select-content li { width: 114px; height: 36px; margin: 0; border-bottom: 1px solid #c1c1c1; line-height: 36px; text-indent: 14px; background-color: #f9f9f9; font-size: 16px; color: #a9a9a9; cursor: pointer; }
.select-bank .select-header { width: 272px; height: 36px; border: 1px solid #c1c1c1; padding-right: 26px; background: url(img/arrow.png) no-repeat #f9f9f9; background-position: 279px 15px; line-height: 36px; text-indent: 14px; font-size: 16px; color: #a9a9a9; cursor: pointer; overflow: hidden; }
.select-bank .select-arrow { background-position: 279px -9px; }
.select-bank .select-content { border-left: 1px solid #c1c1c1; border-right: 1px solid #c1c1c1; position: absolute; top: 38px; left: 0; z-index: 99; display: none; background-color: #f9f9f9; }
.select-bank .select-content li { width: 298px; height: 36px; margin: 0; border-bottom: 1px solid #c1c1c1; line-height: 36px; text-indent: 14px; background-color: #f9f9f9; font-size: 16px; color: #a9a9a9; cursor: pointer; }


最后,上js代码:

 

 

$(function(){
	/**
     * 模拟select
     **/
    $(.select-header).click(function(){
        $(this).parent().siblings(.select-box).find(.select-content).slideUp(fast);
        if($(this).siblings(.select-content).is(:hidden)){
            $(this).addClass(select-arrow);
            $(this).siblings(.select-content).slideDown(fast);
            var evt =  new Object;
            if ( typeof(window.event) == undefined ){//如果是火狐
                evt = arguments.callee.caller.arguments[0];
            }else{
                evt = event || window.event;
            }
            evt.cancelBubble = true;
        }else{
            $(this).removeClass(select-arrow);
            $(this).siblings(.select-content).slideUp(fast);
			//去除事件冒泡
            var evt =  new Object;
            if ( typeof(window.event) == undefined ){//如果是火狐浏览器
                evt = arguments.callee.caller.arguments[0];
            }else{
                evt = event || window.event;
            }
            evt.cancelBubble = true;
        }
    });
	$(document).click(function(){
        $(.select-header).removeClass(select-arrow);
        $(.select-content).slideUp(fast);
    });
    $(.select-content li).on(click,function(){
        $(this).parent().siblings(.select-header).removeClass(select-arrow);
        $(this).parent().siblings(.select-header).text($(this).text()).end().slideUp(fast);
    });
    $(.select-content li).hover(function(){
        $(this).css(background-color,#cfcfcf);
    },function(){
        $(this).css(background-color,#fff);
    });
});

 

 

效果如下:

\


 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<