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

<!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. mysql5.6 TIME,DATETIME,TIMESTAMP

    [背景] 5.6.4以后时间类型(TIME,DATETIME,TIMESTAMP)支持微秒 DATETIME范围 :'1000-01-01 00:00:00.000000' to '9999-12-3 ...

  2. Dynamic CRM 2013学习笔记（三十八）流程1 - 操作（action）开发与配置详解

    CRM 2013 里流程有4个类别:操作(action).业务流程(business process flow).对话(dialog)和工作流(workflow).它们都是从 setting –> ...

  3. WinServer2008 R2搭建TFS2013小结（无法连接Internet手动安装）

    不定时更新参考文档: TFS安装与管理 为本地管理配置本机模式报表服务器 (SSRS) 手里有文档还是掉进各种坑,这里把坑总结一下,方面以后填坑. 安装指导文档中搭建TFS2013用了两台服务器,把S ...

  4. JS备忘录

    /** *删除数组指定下标或指定对象 */ Array.prototype.remove = function (obj) { for (var i = 0; i < this.length; ...

  5. [汇编] C语言中嵌入汇编

    >_<" 下面是在C语言中嵌入汇编的例子,下面是三点要注意的~ 1.内联式汇编 2._asm关键字 3.并不是所有中断都能被支持 #include<iostream> ...

  6. yafphp框架

    学习资料 Yaf(Yet Another Framework)用户手册http://www.laruence.com/manual/index.html laruence/yafhttps://git ...

  7. paip.语义分析--单字词名词表

    paip.语义分析--单字名词表   INSERT INTO t (word)  SELECT DISTINCT word FROM `word_main` where tsisin is not n ...

  8. 两两组合覆盖测试用例设计工具：PICT

    两两组合覆盖测试用例设计工具:PICT 2016-08-31 目录 1 成对测试简介2 PICT使用  2.1 安装 PICT  2.2 使用PICT3 PICT算法  3.1 准备阶段  3.2 产 ...

  9. 这样leetcode简单题都更完了

    这样leetcode简单题都更完了,作为水题王的我开始要更新leetcode中等题和难题了,有些挖了很久的坑也将在在这个阶段一一揭晓,接下来的算法性更强,我就要开始分专题更新题目,而不是再以我的A题顺 ...

  10. （二）关于ajax那些事

    哈哈,今天突然兴起,想了想自己对ajax的了解,来这里叙述下.心情好,嘿嘿嘿 ajax是一种创建交互式网页应用的网页开发技术.就是在不重新加载页面的情况下,更新部分网页. ajax原理:ajax就是相 ...