jQuery插件：模拟select下拉菜单
没搞那么复杂，工作中，基本够用。。
<!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>
