html:
1
2
3
4
5
6
7
8
9
10
|
< span class = "selectType" > < a title = "" href = "#" class = "ipt" id = "selectTypeText" >全部</ a > < span id = "selectTypeMenu" > < a rel = "0" title = "" href = "#" >全部</ a > < a rel = "1" title = "" href = "#" >商品</ a > < a rel = "2" title = "" href = "#" >商铺</ a > </ span > < input type = "hidden" name = "" class = "ipt" value = "" id = "selectTypeRel" > < em class = "searchArrow hh abs" >下拉选择</ em > </ span > |
css:
1
2
3
4
5
6
7
8
9
|
.sysSelect{ width : 76px ; height : 28px ; line-height : 28px ; border : 1px solid #CCC ; font-size : 14px ;} .sysSelect option{ height : 28px ; line-height : 28px ;} .selectType{ position : relative ; width : 78px ; height : 30px ; line-height : 30px ; font-size : 14px ;} .selectType .ipt{ width : 76px ; height : 28px ; line-height : 28px ; border : 1px solid #CCC ; display :inline- block ; text-decoration : none ; color : #000 ; text-indent : 5px ; outline : none ;} .selectType span{ position : absolute ; width : 76px ; background-color : #fff ; border : 1px solid #CCC ; border-top-style : dashed ; left : 0px ; top : 22px ; text-indent : 6px ; line-height : 26px ; display : none ;} .selectType span a{ color : #333 ; display : block ; text-decoration : none ;} .selectType span a:hover{ background-color : #f60 ; color : #fff ;} .selectType .searchArrow{ border-top : 6px solid #666 ; border-left : 6px solid #FFF ; border-right : 6px solid #FFF ; position : absolute ; width : 0 ; height : 0 ; top : 6px ; right : 12px ; cursor : pointer ; -webkit-transition:-webkit-transform 0.2 s ease-in; -moz-transition:-moz-transform 0.2 s ease-in; -o-transition:-o-transform 0.2 s ease-in; transition:transform 0.2 s ease-in; overflow : hidden ; text-indent : -2000px ;} .selectType .searchArrowRote{-moz-transform:rotate( 180 deg); -moz-transform-origin: 50% 30% ; -webkit-transform:rotate( 180 deg); -webkit-transform-origin: 50% 30% ; -o-transform:rotate( 180 deg); -o-transform-origin: 50% 30% ; transform:rotate( 180 deg);transform-origin: 50% 30% ; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation= 2 ); top : -9px / 9 ;} |
js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$( "#selectTypeText" ).click( function () { $( this ).next( "span" ).slideDown(200); $( ".searchArrow" ).addClass( "searchArrowRote" ); }); $( "#selectTypeText" ).blur( function () { $( this ).next( "span" ).slideUp(200); $( ".searchArrow" ).removeClass( "searchArrowRote" ); }); $( "#selectTypeMenu>a" ).click( function () { $( "#selectTypeText" ).text($( this ).text()); $( "#selectTypeRel" ).attr( "value" , $( this ).attr( "rel" )); $( this ).parent().slideUp(200); $( ".searchArrow" ).removeClass( "searchArrowRote" ); return false ; }); |