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

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

截个图:

代码:

<!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
, css3
, 下拉菜单
模拟
jquery实现下拉菜单、用jquery实现下拉菜单、jquery触发select下拉、jquery树形select下拉、jquery打开select下拉,以便于您获取更多的相关知识。

时间: 2024-11-05 18:49:13

jQuery模拟select实现下拉菜单功能_jquery的相关文章

jQuery实现的无限级下拉菜单功能示例_jquery

本文实例讲述了jQuery实现的无限级下拉菜单功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单(无限级)</title> <style> *{ padding: 0; margin: 0; } li{ list-style-type: none;

Bootstrop实现多级下拉菜单功能_jquery

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 下面给大家分享bootstrap多级下拉菜单功能的实例代码. 先给大家看下效果图: - 需要引用bootstrap.min.css和bootstrap.min.css.js - 代码如下 <head> <meta charset="UTF-8"> <title>Boots

jquery实现二级导航下拉菜单效果_jquery

下拉菜单实现很简单,纯css也能实现,但是我不擅长,用jquery也就两行代码,于是就用jquery+css实现简单二级下拉菜单导航,分享给大家供大家参考,具体内容如下 运行效果图: 具体代码:第一步:确定导航的html格式 <ul id="nav"> <li><a href="#">首页</a> <ul> <li><a href="#">PHP编程</a&

jQuery实现的导航下拉菜单效果_jquery

本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <div id="navigation"> <ul> <li><a href="#">首 页</a></li> <li><a href="#">衬 衫</a> <ul> <li><a hr

jquery实现很酷的网页顶部图标下拉菜单效果_jquery

本文实例讲述了jquery实现很酷的网页顶部图标下拉菜单效果.分享给大家供大家参考.具体如下: 兼容IE和火狐的顶部菜单栏,带图标的图文菜单,还有右上角的下拉导航效果,一个演示包括了两种菜单,都是很实用的效果,只使用了jquery就实现了.如果你的网站上此前用有jquery插件,那么整合起来就更方便了,点击运行可预览菜单效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-top-ico-show-menu-style-c

jQuery实现的导航下拉菜单效果示例_jquery

本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

jquery实现漂亮的二级下拉菜单代码_jquery

本文实例讲述了jquery实现漂亮的二级下拉菜单代码.分享给大家供大家参考.具体如下: 这里介绍一款基于jquery实现的网站下拉菜单,黑色风格,很漂亮,本菜单需要点击主菜单后的小三角符号才下拉出二级菜单,并不是有些菜单,是鼠标移上主菜单的时候就滑过,至于哪一种,就看个人的喜好了 先来看看运行效果: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/ 具体代码如下: <!DOCTYPE ht

jQuery实现带动画效果的多级下拉菜单代码_jquery

本文实例讲述了jQuery实现带动画效果的多级下拉菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的多级下拉菜单,带动画效果,所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套,代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-dow

jQuery实现的简洁下拉菜单导航效果代码_jquery

本文实例讲述了jQuery实现的简洁下拉菜单导航效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现简洁下拉菜单导航效果,代码规范,兼容性方面:支持 IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+.简洁明快的jquery网站菜单,请参阅代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-down-show-menu-nav-codes/ 具体代码