首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 20, 2016

用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动画效果)

截个图：

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

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

代码：

<!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模拟select实现下拉菜单功能

- Author -

沫鱼

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
js实现搜索栏效果
Nov 16 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
对jQuary选择器的全面总结
Jun 20 #Javascript
jQuery实现的可编辑表格完整实例
Jun 20 #Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 #Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 #Javascript
浅谈JavaScript中数组的增删改查
Jun 20 #Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 #Javascript
jQuery Tags Input Plugin（添加/删除标签插件）详解
Jun 20 #Javascript
MapReduce(1) css3 (2) Qlabel(1) MybatisPlus(2) pyqt5(3) pycharm(6) Normal From(1) SpringBoot(22) JSON(10) linux(15)
You might like
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
浅谈php和.net的区别
2014/09/28 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
js jquery数组介绍
2012/07/15 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
Python实现字符串逆序输出功能示例
2017/06/24 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python3匿名函数用法示例
2018/07/25 Python
实例讲解python中的协程
2018/10/08 Python
django表单的Widgets使用详解
2019/07/22 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
Expedia印度：您的一站式在线旅游网站
2017/08/24 全球购物
database面试题
2013/03/28 面试题
商务宴请邀请函范文
2015/02/02 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
运动会200米广播稿
2015/08/19 职场文书
电力安全学习心得体会
2016/01/18 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python