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

<!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. 分享一下SQLSERVER技术交流QQ群里的群共享资源

    分享一下SQLSERVER技术交流QQ群里的群共享资源 SQLSERVER技术交流QQ群已经开了一段时间了,人数已经有了100多号人, 而群里面很多SQLSERVER爱好者上传了他们宝贵的SQLSER ...

  2. 用c#开发微信 (22) 微信商城 - 微信支付 （c#源码）

    微信支付有几种支付模式:刷卡支付,扫码支付,公众号支付,APP支付.本文介绍用于在微信商城里的公众号支付. 1. 效果图 在商城里购买商品后,到支付页面: 点击上面的确认支付,转到下面微信支付页面: ...

  3. Dynamic CRM 2013学习笔记（十八）根据主表状态用JS控制子表自定义按钮

    有时要根据主表的审批状态来控制子表上的按钮要不要显示,比如我们有一个需求审批通过后就不能再上传文件了. 首先打开Visual Ribbon Editor, 如下图,我们可以利用Enable Rules ...

  4. Arcgis for Javascript 在VS2012中的智能提示

    官方地址: https://developers.arcgis.com/en/javascript/jsapi/api_codeassist.html 安装步骤 Visual Studio 2010 ...

  5. 《JavaScript语言精粹》学习笔记

    一.in的用法 for...in 枚举一个对象的所有可枚举属性 检测DOM/BOM属性 if ("onclick" in elem) { // 元素支持onclick } if ( ...

  6. Unity3D启动报错的解决方案

    在Windows Server 2003 下安装好Unity3D,启动时报错--“Failed to initialize unity graphics.”,截图如下: 在网上搜了一下,说是要启用D3 ...

  7. [C++] C\C++ printf 输出格式

    1．转换说明符      %a(%A)     浮点数.十六进制数字和p-(P-)记数法(C99)      %c         字符      %d         有符号十进制整数      % ...

  8. Windows 10四大版本区别详解：家庭版, 专业版, 企业版和教育版

    Windows 10有四个基本版本:Windows 10 家庭版, Windows 10 专业版, Windows 10 企业版, 和Windows 10 教育版(这是Windows家族的新成员).以 ...

  9. [BTS] Correct the specified Action, or refer to the documentation on the allowed formats for the Actions

    A message sent to adapter "WCF-SAP" on send port "CNILG.iHouse.SAP.WCFSAP" with ...

  10. adb uninstall

    adb shell pm list packages adb uninstall com.pa.pfac