<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 关注
- 1585 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消