有了梦想,我们的心有了飞翔; 有了飞翔,我们的梦想不再遥远。。。。。。
开抢双十一红包

jquery模仿select下拉列表

2015年12月22日 梦想霞 2793 次浏览

这是用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个人博客无插件调用最新、热门、随机文章实例代码

下一篇: 太全了,各种礼物的含义,留着备用



热门文章

随机文章

站点统计

  • 文章:46 篇
  • 分类:10 个
  • 标签:99 个
  • 运行:990天
  • 更新:2018年2月7日
  • RSS Feed