一个梦想成为web前端开发人员的个人博客网站
当前位置: 前端学习 > JS/Jquery > jquery模仿select下拉列表

jquery模仿select下拉列表

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>

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

支付宝
微信
0

支付宝
微信
标签:

上一篇:

下一篇:

博客简介

一个梦想成为代码女神的前端个人网站,感谢大家的支持与关注。更多web前端开发教程,可关注 - 唯品秀前端技术博客,关注于最前沿的web前端开发技术!注:因多个网站在为其导流,所以服务器压力近期较大,因此在某些时候可能打开速度较慢!

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线