<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

         <title>jq--实现自定义下拉框</title>

     </head>

     <style>

         body {

             margin: 0;

         }

         .xl_select_box {

             display: inline-block;

             position: relative;

             line-height: 60px;

             margin-right: 30px;

         }

         .xl_select {

             width: 100%;

             padding: 0 8px;

             cursor: pointer;

             border: 1px solid #dedede;

         }

         .xl_select span {

             font-size: 16px;

         }

         .xl_select .arrowsdown {

             position: absolute;

             border-width: 6px;

             border-color: #999999 transparent transparent transparent;

             border-style: solid dashed dashed dashed;

             top: 1.8em;

             margin-left: 0.4em;

         }

         .xl_list {

             margin: 0;

             padding: 0;

             display: none;

             list-style: none;

             position: absolute;

             z-index: 2;

             border: 1px solid #dedede;

             border-top: none;

             background-color: #FFFFFF;

         }

         .xl_list li {

             line-height: 40px;

             padding: 0 8px;

             font-size: 14px;

             white-space: nowrap;

             cursor: default;

         }

         .xl_list li:hover {

             background: #F2F5F9;

             color: #666666;

         }

     </style>

     <body>

         <div class="xl_select_box">

             <div class="xl_select">

                 <span>职位推荐</span><i class="arrowsdown"></i>

             </div>

             <ul class="xl_list ">

                 <li>高级UI设计师</li>

                 <li>高级UI设计师</li>

                 <li>中高级Java开发工程师</li>

                 <li>中高级Java开发工程师</li>

                 <li>中高级Java开发工程师</li>

             </ul>

         </div>

         <div class="xl_select_box">

             <div class="xl_select">

                 <span>求职状态</span><i class="arrowsdown"></i>

             </div>

             <ul class="xl_list ">

                 <li>离职-随时到岗</li>

                 <li>在职-暂不考虑</li>

                 <li>在职-考虑机会</li>

                 <li>在职-月内到岗</li>

             </ul>

         </div>

     </body>

     <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

     <script type="text/javascript" charset="utf-8">

         $(function() {

             $(".xl_select").click(function() {

                 $(".xl_list").slideUp();

                 $(this).next(".xl_list").slideToggle();

             });

             $(".xl_list li").click(function() {

                 $(this).parent().prev(".xl_select").children("span").html($(this).html());

                 $(".xl_list").slideUp();

             });

             $(document).bind("click", function(e) {

                 var e = e || window.event; //事件对象，兼容IE

                 var target = e.target || e.srcElement; //源对象，兼容火狐和IE

                 while (target) {

                     if (target.className && target.className == "xl_select_box") { //循环判断至根节点，防止点击的是.xl_list和它的子元素

                         return;

                     }

                     target = target.parentNode;

                 }

                 $(".xl_list").slideUp(); //点击的不是.xl_list和它的子元素，隐藏下拉菜单

             });

         })

     </script>

 </html>

jq--实现自定义下拉框的更多相关文章

  1. easyui源码翻译1.32--Combo(自定义下拉框)

    前言 扩展自$.fn.validatebox.defaults.使用$.fn.combo.defaults重写默认值对象.下载该插件翻译源码 自定义下拉框显示一个可编辑的文本框和下拉面板在html页面 ...

  2. jquery美化select，自定义下拉框样式

    select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

  3. Combo( 自定义下拉框) 组件

    本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于ValidateBox(验证框)组件 一． 加载方式自定义下拉框不能通过标签的方式进行创建.<input ...

  4. 关于safari上的select宽高问题小技，自定义下拉框

    之前一直用windows做开发,最近换了个mac,在几经折腾之下,安装完了各种开发工具,IDE等,然后欣然打开自己正在开发的网站.突然发现mac上所有的下拉框都变了,都是默认样式,无论padding, ...

  5. 第二百一十二节，jQuery EasyUI，Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

  6. vue自定义下拉框组件

    创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...

  7. div自定义下拉框

    因为原生的下拉框不能修改其属性,很难美化下拉框. 所以自己用div简单自定义了一下下拉框,想美化直接修改css即可 <!DOCTYPE html> <html lang=" ...

  8. android中自定义下拉框（转）

    android自带的下拉框好用不?我觉得有时候好用,有时候难有,项目规定这样的效果,自带的控件实现不了,那么只有我们自己来老老实实滴写一个新的了,其实最基本的下拉框就像一些资料填写时,点击的时候出现在 ...

  9. jq select change下拉框选项变化判断选中值,添加（attr)或移除(removeAttr)一个或多个属性

    select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function ...

随机推荐

  1. Django orm常用字段和字段参数

    1.Object Relational Mapping(ORM) 1.1ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象 ...

  2. http--->http缓存机制系统梳理

    http缓存 HTTP请求的过程 从在浏览器地址栏敲入域名-DNS解析-实际IP-(中间可能多个代理服务器分发)- 源服务器,请求抵达源服务器后,在服务器上找到请求的资源,再通过代理服务器一层层的返回 ...

  3. TypeScript——基本类型

    关于数据类型 原始类型 let bool: boolean = true; let num: number = 1; let str: string = 'i am string'; 引用类型 let ...

  4. 利用http协议使用普通的网站虚拟主机＋安信可A6C GPRS模块实现对stm32的远程升级

    步骤: 1.生成bin文件并将bin文件放到虚拟主机目录内 2.做一个php的页面分块读取该bin文件,以asc字符echo出来,并标记好头尾长度和校验. 3.GPRS协议栈连接主机路径,收到内容,将 ...

  5. JSTL （标准标签库）

    JSTL(标准标签库) 作用: Web程序员能够利用JSTL和EL来开发Web程序,取代传统直接在页面上嵌入Java程序(Scripting)的做法,以提高程序的阅读性.维护性和方便性. 使用方法:J ...

  6. 获取PHP类的所有属性和所有方法，可通过反射机制

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <?php   class Class1{     public $var1 = 'v ...

  7. sublime3 docblocker 注释插件的配置

    sublime3 docblocker插件定制自己的注释,配置步骤 DocBlockr很好用,不仅仅可以自动生成注释,还可以手动编辑注释的格式. 安装方法:  Cmd+Shift+P -> In ...

  8. 【论文笔记系列】AutoML：A Survey of State-of-the-art （上）

    之前已经发过一篇文章来介绍我写的AutoML综述,最近把文章内容做了更新,所以这篇稍微细致地介绍一下.由于篇幅有限,下面介绍的方法中涉及到的细节感兴趣的可以移步到论文中查看. 论文地址:https:/ ...

  9. 文件类练习题（FileInputStream类）

    应用FileInputStream类,编写应用程序,从磁盘上读取一个Java程序,并将源程序代码显示在屏幕上.(被读取的文件路径为:d:/myjava/Hello.java 内容自己决定): pack ...

  10. OpenCV3入门（六）图像滤波

    1.图像滤波理论 1.1图像滤波理论 图像滤波即在尽量保留图像细节特征的条件下对目标图像的噪声进行抑制,是图像预处理中不可缺少的操作.消除图像中的噪声又叫做图像滤波或平滑,滤波的目的有两个,一是突出特 ...