jjquery模拟select点击事件

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 ; });

转载于:https://www.cnblogs.com/fdxxiaobai/p/7499502.html