jQuery模拟select实现下拉菜单功能

2019-11-20 09:39:41

字体：大中小

来源：转载

供稿：网友

用jquery模拟一淘上面的搜索下拉的功能，利用css3做箭头的动画效果。

JS代码：

/* * 模拟搜索下拉select * 默认调用方式：$(el).setSelect({ * optionList: [], //这里是下拉的选项，如['aa','bb'] * hiddenInput: '#optionHidden', //隐藏的input获取选中后的值，供表单提交时传值 * getOption: '#sOptionBtn', * callback: function(option){} * }) **/(function ($) { $.fn.setSelect = function(options){   var opt = $.extend({    optionList: [],    getOption: '',    hiddenInput: '',    callback: function(){}   }, options || {});  return this.each(function(){    opt._id = this;    var _time;    var arrow = $(this).find('i');    $(opt._id).append('<ul id="selectList"></ul>');    for(var i=0;i<opt.optionList.length;i++){       $("#selectList").append('<li>'+opt.optionList[i]+'</li>')     };    $(opt._id).bind({      mouseenter: function(){        $(arrow).addClass('arrow-hover');        $('#selectList').slideDown();        clearTimeout(_time);       },      mouseleave: function(){        _time=setTimeout(function(){          $(arrow).removeClass('arrow-hover');          $('#selectList').slideUp()         },300);       }     });    //获取选择的值    $('#selectList').delegate('li','click',function(){        var option = $(this).text();        $(opt.getOption).text(option);        $(opt.hiddenInput).val(option);        $('#selectList').slideUp();        return opt.callback(option);      });   }); }})(jQuery);

demo:(只有在高级的chrome及firefox下才能看到CSS3动画效果)

截个图：

//files.VeVB.COm/file_images/article/201606/201606201015084.png

//files.VeVB.COm/file_images/article/201606/201606201015085.png

代码：

<!doctype html><htm> <head>  <meta http-equiv="Content-type" content="text/html charset=utf-8">  <title></title>  <style>  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {   margin: 0;   padding: 0  }  body, button, input, select, textarea {   font: 12px Arial, Helvetica, sans-serif  }  h1, h2, h3, h4, h5, h6 {   font-size: 100%  }  code, kbd, pre, samp {   font-family: courier new, courier, monospace  }  small {   font-size: 12px  }  ul, ol {   list-style: none  }  a {   text-decoration: none;   color: #333  }  a:hover {   text-decoration: underline  }  sup {   vertical-align: text-top  }  sub {   vertical-align: text-bottom  }  legend {   color: #000  }  fieldset, img {   border: 0  }  button, input, select, textarea {   font-size: 100%  }  button {   border: 0 none;   cursor: pointer  }  table {   border-collapse: collapse;   border-spacing: 0  }  em {   font-style: normal  }  address {   font-style: normal  }  textarea {   resize: vertical  }  html {  zoom:expression(function(ele) {  ele.style.zoom = "1";  document.execCommand("BackgroundImageCache", false, true)  }  (this))  }/*解决IE下express重复执行的问题*/  article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, menu, mark, output, progress, section, source, video, address {   display: block  }/*html5标签向下兼容*/  .clearfix:after {   content: '/20';   display: block;   height: 0;   clear: both;   visibility: hidden  }  .clearfix {  *zoom:1  }  .arrow-dn {   display: inline-block;   height: 0;   width: 0;   font-size: 0;   overflow: hidden;   border: 3px solid #505050;   border-color: #505050 transparent transparent;   _border-style: solid dotted dotted dotted  }  .top-search {   width: 497px;   height: 30px;   _height: 33px;   background: url(../images/bg.png) left top no-repeat;   _padding-bottom: 0;   margin-top: 20px;   border: 3px solid #cd0001;   border-radius: 5px;   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   -ms-border-radius: 5px;   position: relative;   z-index: 9;   margin: 50px auto  }  .top-search input {   width: 350px;   float: left;   padding: 7px 0;   _padding: 6px 0;   border: none 0;   background: 0;   color: #666;   font-size: 14px  }  .top-search input:focus, .area-search .search-intri input:focus {   outline: 0  }  .top-search button {   width: 77px;   height: 30px;   line-height: 30px;   font-weight: bold;   font-size: 14px;   text-align: center;   background: #f4ac1f;   float: right  }  .top-search .select {   float: left;   font-size: 14px;   width: 55px;   padding-top: 5px;   margin-right: 5px;   position: relative;   z-index: 3  }  .top-search .select ul {   position: absolute;   left: -3px;   top: 30px;   width: 55px;   background: #fff;   border: 3px solid #cd0001;   border-bottom-left-radius: 5px;   border-bottom-right-radius: 5px;   border-top: 0;   line-height: 1.8;   display: none  }  .top-search .select ul li {   cursor: pointer;   padding: 2px 0;   padding-left: 10px  }  .top-search .select ul li:hover {   background: #f3f3f3  }  .top-search .select .s-option {   display: inline-block;   position: absolute;   top: 0;   height: 32px;   line-height: 28px;   width: 45px;   padding-left: 8px  }  .top-search .select a:hover {   text-decoration: none  }  .top-search .select .arrow-dn {   border-width: 4px;   border-color: #939393 transparent transparent;   position: absolute;   right: 7px;   top: 11px;   -webkit-transition: -webkit-transform .2s ease-in-out;   -webkit-transform: translate3d(0, 0, 999px);   -webkit-backface-visibility: visible;   -moz-transition: -moz-transform .2s ease-in-out;   -moz-transform: translate3d(0, 0, 999px);   -moz-backface-visibility: visible;  }  .top-search .select .arrow-hover {   -webkit-transform: rotate(-180deg);   -moz-transform: rotate(-180deg);   -o-transform: rotate(-180deg);   -webkit-transform: translated3d(0, 0, 999px);   border-color: transparent transparent #939393/9;   top: 10px;   top: 7px/9;   _top: 11px  }  </style>  </head> <body>  <form class="top-search clearfix">   <!--隐藏的input获取option值-->   <input type="hidden" id="optionHidden" value="机构">   <div class="select">    <a id="sOptionBtn" class="s-option" href="javascript:void(0)">机构</a>    <i class="arrow-dn"></i>   </div>   <input type="text" id="kw">   <button type="submit">搜索</button>  </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script>  $(function(){   $('.top-search .select').setSelect({    optionList: ['机构','课程'],    hiddenInput: '#optionHidden',    getOption: '#sOptionBtn',    callback: function(option){}   });  });  (function ($) {   $.fn.setSelect = function(options){     var opt = $.extend({      optionList: [],      getOption: '',      hiddenInput: '',      callback: function(){}     }, options || {});    return this.each(function(){      opt._id = this;      var _time;      var arrow = $(this).find('i');      $(opt._id).append('<ul id="selectList"></ul>');      for(var i=0;i<opt.optionList.length;i++){         $("#selectList").append('<li>'+opt.optionList[i]+'</li>')       };      $(opt._id).bind({        mouseenter: function(){          $(arrow).addClass('arrow-hover');          $('#selectList').slideDown();          clearTimeout(_time);         },        mouseleave: function(){          _time=setTimeout(function(){            $(arrow).removeClass('arrow-hover');            $('#selectList').slideUp()           },300);         }       });      //获取选择的值      $('#selectList').delegate('li','click',function(){          var option = $(this).text();          $(opt.getOption).text(option);          $(opt.hiddenInput).val(option);          $('#selectList').slideUp();          return opt.callback(option);        });     });   }  })(jQuery); </script> </body></html>

以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：jquery通过name属性取值的简单实现方法

下一篇：对jQuary选择器的全面总结