
jquery模仿select下拉列表
2015年12月22日 梦想霞 3961 次浏览
这是用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> |
标签:jquery下拉列表
上一篇: WordPress个人博客无插件调用最新、热门、随机文章实例代码
下一篇: 太全了,各种礼物的含义,留着备用
标签云
热门文章
随机文章