首页
所有分类
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 相关文章推荐
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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
Vscode(3) 算法(1) OVERLORD(1) 数据表(1) SSH(3) 2022年7月新番(1) 双人对弈(1) 人人对战(1) 时钟(1) 后端(1)
You might like
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
Smarty3配置及入门语法
2017/02/22 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
vue之数据交互实例代码
2017/06/16 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
浅析JS抽象工厂模式
2017/12/14 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[02:50]【扭转乾坤，只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python中sets模块的用法实例
2014/09/30 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
软件工程师面试题
2012/06/25 面试题
生日礼品店创业计划书范文
2014/03/21 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
MySQL基础（一）
2021/04/05 MySQL