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

jquery模仿select下拉列表

2015-12-22 分类:JS/Jquery 作者:梦想霞 阅读(4701)

这是用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>

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

赞(1) 打赏

支付宝
微信
1

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

博客简介

沉鱼落雁,闭月羞花,一个妖娆多姿梦想成为代码女神的前端个人网站分享自己程序人生,欢迎大家一起交流分享前端开发技术经验,更多web前端开发教程,可关注 - 唯品秀前端技术博客

精彩评论

服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线