这是用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个人博客无插件调用最新、热门、随机文章实例代码
下一篇：太全了，各种礼物的含义，留着备用
这个不错耶，我喜欢！
评：本站主题由“唯品秀前端技术博客”免费提供学习啦，很久没浏览过了！
评：本站主题由“唯品秀前端技术博客”免费提供春暖花开，下次再来！
评：本站主题由“唯品秀前端技术博客”免费提供不让出门，只能刷刷博客了！
评：本站主题由“唯品秀前端技术博客”免费提供不是,最在乎的未必是最爱的,但最爱的人肯定是最在乎的
评：个人博客建好了，但经营起来还是蛮不容易的有位置
评：HTML5新增标签
