<script>$(function(){ $(".select span").click(function(){ if( $(this).hasClass('se') ){ $(this).removeClass('se').next(".selectList").removeClass("see"); }else{ $(this).addClass('se').next(".selectList").addClass("see"); }; $(this).next(".selectList").slideToggle(100, "linear"); $(".selectList").each(function(){ var temp = $(".selectList li").text(); $(".selectList li").click(function(){ temp = $(this).text(); $(".select").find("span").text(temp); $(".selectList").hide(); }); }); }); $(document).click(function(event) { $(".select span").removeClass("se").next(".selectList").removeClass("see"); $(".selectList").hide(); }); //点击其他地方下拉框消失 $(".select span,.selectList").click(function(event){ if(event.stopPropagation) event.stopPropagation(); else if(window.event) window.event.cancelBubble = true; }) })</script> <div class="select"> <span>{dede:type}[field:typename/]{/dede:type}</span> <ul class="selectList"> <li><a href="http://www.idp.cn/">全国</a></li> <li><a href="http://www.idp.cn/beijing/">北京</a></li> <li><a href="http://www.idp.cn/guangzhou/">广州</a></li> <li><a href="http://www.idp.cn/shenzhen/">深圳</a></li> <li><a href="http://www.idp.cn/nanjing/">南京</a></li> <li><a href="http://www.idp.cn/chengdu/">成都</a></li> <li><a href="http://www.idp.cn/chongqing/">重庆</a></li> <li><a href="http://www.idp.cn/wuhan/">武汉</a></li> <li><a href="http://www.idp.cn/qingdao">青岛</a></li> <li><a href="http://www.idp.cn/hangzhou">杭州</a></li> </ul> </div>
1 回答
李晓健
TA贡献1036条经验 获得超461个赞
<style>
.select{
width: 100px;
margin: 20px auto;
position: relative;
}
span{
text-align: center;
display: inline-block;
border: 1px solid #ccc;
padding: 5px 10px;
width: 80px;
}
.selectList{
border: 1px solid #ccc;
position: absolute;
top: 29px;
display: none;
list-style: none;
margin: 0;
padding: 0;
}
.selectList li{
padding: 5px 10px;
width: 80px;
text-align: center;
}
.selectList li a{
text-decoration: none;
color: #333;
}
</style>你的代码没有任何问题(要保证你页面的jquery是引入的),没看到你的样式,我就随便写了几行,看起来和你的差不多了
- 1 回答
- 0 关注
- 1699 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消
