<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ margin:0; padding:0; font-size:13px;} ul,li{list-style:none;} .div-select{position:relative; } .div-select cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal; padding-left:4px; padding-right:30px; border:1px solid #333333; background:url(xjt.png) no-repeat right center;} .div-select ul{width:184px;border:1px solid #333333; background-color:#fff; position:absolute; z-index:10; margin-top:-1px; display:none;} .div-select li{height:24px; line-height:24px;} .div-select li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;} .div-select li a:hover{background-color:#CCC;} </style> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javascript"> //改写div模拟下拉菜单jquery插件 基本结构微动， id改成类名，原主方法不懂只是改写下 $.fn.divSelect = function(){ return this.each(function(index){ var $this = $(this), $cite = $this.find("cite"), $list = $this.find("ul"), $input = $this.find(".div-input"); $this.on("click","cite",function(){ $list.is(":hidden") ? $list.slideDown("fast") : $list.slideUp("fast"); return false }); $list.on("click","a",function(){ var $this = $(this); $cite.text($this.text()); $input.val($this.attr("selectid")); $list.hide(); return false }); $(document).on("click.select"+index,function(){ $list.hide(); }); }) }; $(function(){ //调用 支持jquery连缀语法 $(".div-select").divSelect(); }); </script> </head> <body style="padding: 50px;"> <form action="" method="post"> <div class="div-select"> <cite>请选择特效分类1</cite> <ul> <li><a href="javascript:;" selectid="1">导航菜单1</a></li> <li><a href="javascript:;" selectid="2">焦点幻灯片1</a></li> <li><a href="javascript:;" selectid="3">广告代码1</a></li> <li><a href="javascript:;" selectid="4">网页特效1</a></li> <li><a href="javascript:;" selectid="5">jquery 特效1</a></li> </ul> <input name="" type="hidden" value="" class="div-input"/> </div> <br/><br/> <div class="div-select"> <cite>请选择特效分类2</cite> <ul> <li><a href="javascript:;" selectid="1">导航菜单2</a></li> <li><a href="javascript:;" selectid="2">焦点幻灯片2</a></li> <li><a href="javascript:;" selectid="3">广告代码2</a></li> <li><a href="javascript:;" selectid="4">网页特效2</a></li> <li><a href="javascript:;" selectid="5">jquery 特效</a></li> </ul> <input name="" type="hidden" value="" class="div-input"/> </div> </form> </body> </html>