Html代码:
<div class="slDiv">
<span id="btnSelect">工程名搜索</span>
<div class="ulDiv">
<ul>
<li>地名地址搜索</li>
<li>行政区域搜索</li>
<li>燕郊区域搜索</li>
<li>无主用地搜索</li>
</ul>
</div>
</div>
CSS代码:
*{font-family:'Microsoft YaHei';font-size:12px;color:#707070;}
ul,li{margin:0px;padding:0px;}
.slDiv{float:left;margin-top:5px;position:relative;}
.slDiv #btnSelect{background:url("../images/selAppear.png") right no-repeat;width:125px;display:inline-block;text-indent:10px;}
.slDiv .ulDiv{display:none;width:125px;border:1px solid #EEEEEE;border-radius:1px;background:#FFF;margin-top:8px;position:absolute;z-index:100;}
.slDiv .ulDiv.ulShow{display:block;}
.slDiv .ulDiv ul li{text-indent:10px;cursor:pointer;}
.slDiv .ulDiv ul li:hover{background:#cbebf6;}
js代码:
$('.slDiv #btnSelect').on('click',function(){
$(this).siblings('.ulDiv').toggleClass('ulShow');
});
$('.slDiv .ulDiv ul li').on('click',function(){
var selTxt=$(this).text();
$('.slDiv #btnSelect').text(selTxt);
$('.ulDiv').removeClass('ulShow');
});
====> 记录完毕