<span>选择地区</span>
<div class="sleAreaHidden">
<div class="sleAreaLi">北京</div>
<div class="sleAreaLi">上海</div>
<div class="sleAreaLi">深圳</div>
</div>
css代码:
.sleAreaDiv{width:109px;border:1px solid #ccc;height:30px;line-height:30px;text-align:left;text-indent:1em;background: #fff url(../images/logo.png) no-repeat -648px -132px;position:relative;cursor:pointer;}
.sleAreaHidden{width:100%;border:1px solid #ccc;position:absolute;left:-1px;visibility:hidden;background:#fff;}
.sleAreaHidden .sleAreaLi{height:25px;}
jquery代码(要先引用jquery文件):
$(document).ready(function(){
select('sleAreaDiv','sleAreaHidden','sleAreaLi','#bf3982','#666','white');
})
function select(selectDiv,selectHidden,selectLi,bgcolor,precolor,color){
$('.'+selectDiv).click(function(){
$('.'+selectDiv).children('.'+selectHidden).css('visibility','hidden');
$(this).children('.'+selectHidden).css('visibility','visible');
})
$('.'+selectLi).mouseover(function(){
$('.'+selectLi).css({'background':'none','color':precolor});
$(this).css({'background':bgcolor,'cursor':'pointer','color':color});
})
$('.'+selectLi).click(function(event){
event.stopPropagation();//防止触发事件冒泡到父元素
$(this).parent().css('visibility','hidden');
$(this).parent().parent().children('span').html($(this).html());
})
}