没搞那么复杂，工作中，基本够用。。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery插件：模拟select下拉菜单</title>

<style>

/* css reset */

body,ul,ol,li,dl,dt,dd,h1,table,tr,td,thead,tbody,tfoot,h2,h3,h4,h5,h6,p,img,label,input,textarea,button,hr {margin:0;padding:0;}

body,input,select,button,textarea {font:12px/18px arial;color:#666;}

h1,h2,h3,h4,h5,h6 {font-family:Microsoft YaHei,simhei,tahoma,arial; }

a {color:#069;text-decoration:none;}

ul,ol {list-style:none;}

li {*zoom:1;}

i,em {font-style:normal;}

input,textarea,select,a,button {outline:none;}

input,img {vertical-align:middle;}

textarea {overflow:auto;resize:none;}

img {border:none;}

table {border-collapse:collapse;border-spacing:0;}

.arrow {width:0;height:0;overflow:hidden;border-width:4px;border-color:transparent;border-style:solid;_border-style:dashed;display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}

/* dropdown */

.dropdown {height:35px;position:relative;line-height:35px;font-size:14px;border:1px solid #ccc;cursor:pointer;}

.dropdown a {height:100%;padding:0 10px;display:block;color:#333;}

.dropdown > a {padding-right:30px;}

.dropdown .arrow {position:absolute;top:15px;right:10px;border-top-color:#999;}

.dropdown p {width:100%;position:absolute;top:100%;left:-1px;z-index:9;border:1px solid #ccc;border-top:none;background-color:#fff;display:none;}

.dropdown p a:hover {background-color:#069;color:#fff;}

.dropdown.open .arrow {top:9px;border-top-color:transparent;border-bottom-color:#666;}

/* option */

.option {width:200px;margin:20px;}

</style>

</head>

<body>

<div class="option">

	<a href="javascript:;">请选择</a>

    <i class="arrow"></i>

    <p>

    	<a href="javascript:;">语文</a>

    	<a href="javascript:;">数学</a>

    	<a href="javascript:;">英语</a>

    </p>

</div>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>

;(function($) {

    $.fn.extend({

        dropdown : function() {

            $(this).each(function() {

                var self = $(this);

                var act = self.children("a");

                var para = self.children("p");

                var links = para.find("a");

                self.addClass("dropdown");

                links.filter(":contains("+ act.text() +")").hide();

                self.on("click", function() {

                    para.toggle();

                    self.toggleClass("open");

                    links.on("click", function() {

                        var _this = $(this);

                        act.text(_this.text());

                        _this.hide().siblings().show();

                    })

                    return false;

                })

                $(document).on("click", function() {

                    para.hide();

                    self.removeClass("open");

                });

            });

        }

    });

})(jQuery);

</script>

<script>

$(function() {

	$(".option").dropdown();

});

</script>

</body>

</html>

　　

jQuery插件：模拟select下拉菜单的更多相关文章

  1. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

  2. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  3. jquery插件制作，下拉菜单

    要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...

  4. 轻松使用div模拟select下拉菜单

    没有办法,平时不是万不得已我是不喜欢去模拟各类控件的,一个是麻烦,二个是对性能也有些影响,还是原生的来的实在.老板昨天发话,必须模拟赶紧的,老外最喜欢简洁干净的风格,说的貌似都很在理的样子,业务部也是 ...

  5. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  6. 联合县城市，采用ajax，而使用ul模拟select下拉

    接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){                          ...

  7. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  8. jQuery/CSS3大屏下拉菜单 自定义子菜单内容

    这是一款样式很酷的jQuery/CSS3下拉菜单,首先这款CSS3菜单是宽屏的,主要是下拉菜单非常大气,更重要的是,下拉菜单的内容可以自己定义,也就是说,下拉菜单中可以定义菜单.图片等HTML元素,是 ...

  9. select 下拉菜单Option对象使用add(elements,index)方法动态添加

    原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...

随机推荐

  1. opengl的mipmap

    压缩纹理是不能调用glGenerateMipmap生成mipmap的. DDS和PVR都不行. 强行调用会产生GL_INVALID_OPERATION的错误. PNG格式试验了glGenerateMi ...

  2. 20 个免费的 Bootstrap 的后台管理模板

    之前 OSC 曾经发过多个后台管理界面模板的推荐,例如: 50 个漂亮的后台管理界面模板 25 个精美的后台管理界面模板和布局 分享 6 套超酷的后台管理员界面网站模板 30个优秀的后台管理界面设计案 ...

  3. Python time datetime常用时间处理方法

    常用时间转换及处理函数: import datetime # 获取当前时间 d1 = datetime.datetime.now() print d1 # 当前时间加上半小时 d2 = d1 + da ...

  4. ASP.NET Core重写个人博客站点小结

    今天用ASP.NET Core重写了个人博客站点,原来是基于ASP.NET 4.5开发的.重写工作总体很顺利,最后成功发布到Ubunt+Nginx平台上.效果如下: 右边的Header信息里可以看到已 ...

  5. 那些年我们一起追过的Linux命令

    1. cd - 作用:返回上次的目录,类似于Windows的后退功能: 2. man ascii 作用:打印出八进制.十六进制和十进制的ASCII码表:(再也不用Google ASCII表啦) 3. ...

  6. 一道印象深刻的面试题：String参数传递问题

    今天小菜去北京某知名公司面试,做了公司的面试题,然后就是轻松的面试. 面试过程中,面试官让我讲讲其中一个题是怎么选的答案,代码大致内容如下: public class StringTest{ publ ...

  7. 微软发布Windows 10：连Windows 7都能免费升级了

    今日凌晨,微软宣布Windows 10发布. Windows10 整体重置了 Window8 的设计,恢复了原有的开始菜单设置,系统新增了虚拟桌面功能,搜索框加分类项的形式替代原有的两栏式控制面板界面 ...

  8. Java程序员的日常 —— static的用法讲解实践

    之前文章说过Java中static的作用,有朋友想看个例子.于是便抽空写了个小栗子 代码 package xing.test.thinking.chap5; class A{ public A() { ...

  9. javaweb学习总结(七)——HttpServletResponse对象(一)

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象即然代表请求和响应,那我们要 ...

  10. Web端测试和移动端测试的区别

    1.记录bug 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片,对于错误的地方可以用工具自带的标识来重点标记. 对于移动端设备可以用手机自带的截图工具来截图然后传到电脑上,个人一般 ...