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

<!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. 一步一步搭建客服系统 (2) 如何搭建SimpleWebRTC信令服务器

    上次介绍了<3分钟实现网页版多人文本.视频聊天室 (含完整源码)>使用的是default 信令服务器,只是为了方便快速开始而已.SimapleWebRTC官方文档里第一条就讲到,不要在生产 ...

  2. Hyper-V的使用方法

    win8和win8.1以及win10自带虚拟机,无需再装第三方虚拟机软件. 首先需要在“启用或关闭windows功能”中,启用Hyper-V

  3. ArcServer 10.0 “No Content”、“Server Host Cannot be null” 错误

    问题一:"No Content" 问题描述: 在输入服务地址时:http://192.168.1.180/arcgis/services   结果出现下面的错误:   解决办法: ...

  4. java5 ReadWriteLock用法--读写锁实现

    读写锁:分为读锁和写锁,多个读锁不互斥,读锁与写锁互斥,这是由jvm自己控制的,你只要上好相应的锁即可.如果你的代码只读数据,可以很多人同时读,但不能同时写,那就上读锁:如果你的代码修改数据,只能有一 ...

  5. C#与数据库访问技术总结（十四）之DataAdapter对象

    DataAdapter对象 DataAdapter对象主要用来承接Connection和DataSet对象. DataSet对象只关心访问操作数据,而不关心自身包含的数据信息来自哪个Connectio ...

  6. Node.js学习系列总索引

    Node.js学习系列也积累了一些了,建个总索引方便相互交流学习,后面会持续更新^_^! 尽量写些和实战相关的,不讲太多大道理... Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- ...

  7. MySQL的几种连接 join/inner join/cross join/逗号/left join/right join/natural join

    转载请注明出处!! 之前数据表连接操作多使用逗号或者join,对几种连接的概念一直浑浑噩噩,最近研究了一波,把这些连接的区别搞明白了.   连接:A xjoin B(主表 操作 关联表)  selec ...

  8. 分析一个C语言程序生成的汇编代码-《Linux内核分析》Week1作业

    署名信息 郭春阳 原创作品转载请注明出处 :<Linux内核分析>MOOC课程 http://mooc.study.163.com/course/USTC-1000029000 C源码 这 ...

  9. Comet技术详解：基于HTTP长连接的Web端实时通信技术

    前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...

  10. jquery-drawsvg — HTML5轻量级插件

    在html5中,有许多插件,今天小编就为大家分享众多插件中的jquery-drawsvg插件. jquery-drawsvg是什么插件呢?其实,jquery-drawsvg是一款轻量级的使用jQuer ...