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

这是用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) 打赏
这世间总有人在过着我一直向往已久的生活

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

博客简介

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

精彩评论

友情链接

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

站点统计

  • 文章总数: 47 篇
  • 草稿数目: 7 篇
  • 分类数目: 16 个
  • 独立页面: 5 个
  • 评论总数: 506 条
  • 链接总数: 7 个
  • 标签总数: 287 个
  • 注册用户: 2 人
  • 访问总量: 8,741,687 次
  • 最近更新: 2020年11月2日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线