首页
所有分类
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 12 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
JS实现的冒泡排序，快速排序，插入排序算法示例
Mar 02 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
对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
鉴频器(1) 原理(1) 发烧友(1) 电路(15) 单管机(1) AM(1) 春雷3P7(1) 实习报告(1) 探测器(1) 频偏(1)
You might like
php cache类代码(php数据缓存类)
2010/04/15 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
jquery $.each() 使用小探
2013/08/23 Javascript
JavaScript lastIndexOf方法入门实例（计算指定字符在字符串中最后一次出现的位置）
2014/10/17 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
python2 与python3的print区别小结
2018/01/16 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
python和php哪个更适合写爬虫
2020/06/22 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
花园仓库建筑：Garden Buildings Direct
2018/02/16 全球购物
什么是.net
2015/08/03 面试题
机械专业个人求职自荐信格式
2013/09/21 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
监察建议书范文
2014/03/12 职场文书
岗位廉政承诺书
2014/03/27 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
Python打包为exe详细教程
2021/05/18 Python
Nginx的gzip相关介绍
2022/05/11 Servers