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

<!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. Upstart 1.10 发布，系统初始化守护进程

    Upstart 是一个用以替换 /sbin/init 守护进程的软件,基于事件机制开发.可用来处理启动过程中的任务和服务启动. Upstart 1.10 发布,改进记录: New bridges: u ...

  2. 用groovy采集网页数据

    首先,用 http://groovyconsole.appspot.com/ 测试下面的代码,发现引用总是失败. 下载了GGTS: https://spring.io/tools/ggts 测试成功: ...

  3. C#设计模式(8)——桥接模式（Bridge Pattern）

    一.引言 这里以电视遥控器的一个例子来引出桥接模式解决的问题,首先,我们每个牌子的电视机都有一个遥控器,此时我们能想到的一个设计是——把遥控器做为一个抽象类,抽象类中提供遥控器的所有实现,其他具体电视 ...

  4. [WinAPI] API 3 [获取系统目录，并保存在文件里]

    /* 获取系统目录,并保存在文件里 [peoject->set->link->project chose->subsystem:console] */ #include< ...

  5. [备忘][转]rsync使用时的常见问题

    sync使用时的常见问题: 错误1: rsync: read error: Connection reset by peer (104) rsync error: error in rsync pro ...

  6. Atitit.并发测试解决方案(2) -----获取随机数据库记录 随机抽取数据 随机排序 原理and实现

    Atitit.并发测试解决方案(2) -----获取随机数据库记录 随机抽取数据 随机排序 1. 应用场景 1 2. 随机抽取数据原理 1 3. 常用的实现方法:::数据库随机函数 1 4. Mssq ...

  7. atitit.团队建设总结fx O622

    团队建设总结fx O622 大的title 2 建设团队文化 2 办公环境(3s+树+湖) 3 每人一个办公室 3 弹性工作制 3 重大的决定公投体制 3 每年一个kid经验日 3 做自己想到做的事. ...

  8. atitit.客户端连接oracle数据库的方式总结

    客户端连接oracle数据库的方式总结 目录 Java程序连接一般使用jar驱动连接..... 桌面GUI一般采取c语言驱动oci.dll 直接连接... 间接连接(需要配置tns及其envi var ...

  9. Leetcode 160 Intersection of Two Linked Lists 单向链表

    找出链表的交点, 如图所示的c1, 如果没有相交返回null. A:             a1 → a2                               ↘               ...

  10. Python快速上手JSON指南

    什么是JSON? 网上对JSON有很多教程,有各种各样的解释.一言以蔽之,JSON本质上是一种语法,这种语法的作用是把数据以字符串的形式存储.传递,多用于Web编程. JSON的典型示例 '{ &qu ...