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.2s ease-in; -moz-transition:-moz-transform 0.2s ease-in; -o-transition:-o-transform 0.2s ease-in; transition:transform 0.2s ease-in; overflow:hidden; text-indent:-2000px;}.selectType .searchArrowRote{-moz-transform:rotate(180deg); -moz-transform-origin:50% 30%; -webkit-transform:rotate(180deg); -webkit-transform-origin:50% 30%; -o-transform:rotate(180deg); -o-transform-origin:50% 30%; transform:rotate(180deg);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;}); |