2015-12-22 分类：JS/Jquery 作者：梦想霞 阅读（4306）
这是用jquery模仿的一个select下拉列表 ，会HTML的人都知道select标签，但是默认的select下拉列表，无法更改样式，而我们又想要自定义好看的样式，所以自己就试着用jquery做了这个demo，可以按照自己的要求自定义样式了。
我做的样式如下：
部分代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <div class="content"> <div class="select"> <p>所有选项</p> <ul> <li dataValue="所有选项" class="selected">所有选项</li> <li dataValue="div+css">div+css</li> <li dataValue="javascript">javascript</li> <li dataValue="jquery">jquery</li> <li dataValue="html5">html5</li> </ul> </div> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".select p").click(function(e){ $(".select").toggleClass("open"); e.stopPropagation(); }); $(document).click(function(){ $(".select").removeClass("open"); }); $(".select ul li").click(function(){ var $this = $(this); $this.addClass("selected").siblings().removeClass("selected"); $(".select p").text($this.attr("dataValue")); }); }); </script> |
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
上一篇：WordPress个人博客无插件调用最新、热门、随机文章实例代码
下一篇：太全了，各种礼物的含义，留着备用
这个网站就有点厉害了
评：前端学习资料大全，最全面的互联网学习资源教程来了一次又一次，总是情不自已！
评：啊，我怀宝宝了，不做前端了，即将转行做全职妈妈了Hello There! Have A Good Day!
评：支付宝再投“10个亿”，蚂蚁会员有机会获得最高188元圣诞红包哦！Ye ! This Is A Good Blog!
评：支付宝再投“10个亿”，蚂蚁会员有机会获得最高188元圣诞红包哦！人生如白驹过隙，每天浏览几篇博客，学习学习，充实自己！
评：支付宝再投“10个亿”，蚂蚁会员有机会获得最高188元圣诞红包哦！来看看，因为，总能学到东西！
评：支付宝再投“10个亿”，蚂蚁会员有机会获得最高188元圣诞红包哦！
