jq--实现自定义下拉框 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  6         <title>jq--实现自定义下拉框</title>
  7     </head>
  8     <style>
  9         body {
 10             margin: 0;
 11         }
 12 
 13         .xl_select_box {
 14             display: inline-block;
 15             position: relative;
 16             line-height: 60px;
 17             margin-right: 30px;
 18         }
 19 
 20         .xl_select {
 21             width: 100%;
 22             padding: 0 8px;
 23             cursor: pointer;
 24             border: 1px solid #dedede;
 25         }
 26 
 27         .xl_select span {
 28             font-size: 16px;
 29         }
 30 
 31         .xl_select .arrowsdown {
 32             position: absolute;
 33             border-width: 6px;
 34             border-color: #999999 transparent transparent transparent;
 35             border-style: solid dashed dashed dashed;
 36             top: 1.8em;
 37             margin-left: 0.4em;
 38         }
 39 
 40         .xl_list {
 41             margin: 0;
 42             padding: 0;
 43             display: none;
 44             list-style: none;
 45             position: absolute;
 46             z-index: 2;
 47             border: 1px solid #dedede;
 48             border-top: none;
 49             background-color: #FFFFFF;
 50         }
 51 
 52         .xl_list li {
 53             line-height: 40px;
 54             padding: 0 8px;
 55             font-size: 14px;
 56             white-space: nowrap;
 57             cursor: default;
 58         }
 59 
 60         .xl_list li:hover {
 61             background: #F2F5F9;
 62             color: #666666;
 63         }
 64     </style>
 65     <body>
 66         <div class="xl_select_box">
 67             <div class="xl_select">
 68                 <span>职位推荐</span><i class="arrowsdown"></i>
 69             </div>
 70             <ul class="xl_list ">
 71                 <li>高级UI设计师</li>
 72                 <li>高级UI设计师</li>
 73                 <li>中高级Java开发工程师</li>
 74                 <li>中高级Java开发工程师</li>
 75                 <li>中高级Java开发工程师</li>
 76             </ul>
 77         </div>
 78 
 79         <div class="xl_select_box">
 80             <div class="xl_select">
 81                 <span>求职状态</span><i class="arrowsdown"></i>
 82             </div>
 83             <ul class="xl_list ">
 84                 <li>离职-随时到岗</li>
 85                 <li>在职-暂不考虑</li>
 86                 <li>在职-考虑机会</li>
 87                 <li>在职-月内到岗</li>
 88             </ul>
 89         </div>
 90     </body>
 91     <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 92     <script type="text/javascript" charset="utf-8">
 93         $(function() {
 94             $(".xl_select").click(function() {
 95                 $(".xl_list").slideUp();
 96                 $(this).next(".xl_list").slideToggle();
 97             });
 98 
 99             $(".xl_list li").click(function() {
100                 $(this).parent().prev(".xl_select").children("span").html($(this).html());
101                 $(".xl_list").slideUp();
102             });
103             
104             $(document).bind("click", function(e) {
105                 var e = e || window.event; //事件对象，兼容IE
106                 var target = e.target || e.srcElement; //源对象，兼容火狐和IE
107                 while (target) {
108                     if (target.className && target.className == "xl_select_box") { //循环判断至根节点，防止点击的是.xl_list和它的子元素
109                         return;
110                     }
111                     target = target.parentNode;
112                 }
113                 $(".xl_list").slideUp(); //点击的不是.xl_list和它的子元素，隐藏下拉菜单
114             });
115         })
116     </script>
117 </html>

 

posted @ 2020-02-26 08:48  杵臼  阅读(465)  评论(0)  编辑  收藏  举报