<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ word-wrap:break-word; } a:link, a:visited { color: #656d78; text-decoration: none; } .login_slct a { margin-right: -8px; padding-right: 16px; background: url(images/arrwd.gif) no-repeat 100% 50%; } a{ outline: none; } .sltm{ padding: 5px 11px 5px 10px; border: 1px solid #DDD; background-color: #FFF; text-align: left; } .sltm ul{ list-style: none; margin: 0; padding: 0; } .sltm li{ padding: 2px 0; color: #666; cursor: pointer; list-style: none; } </style> <script src="js/jquery.min.js"></script> <script> function checkStatus(){ if(!flag){ $("#loginfield_ctrl_menu").fadeOut(); } } var flag=false; $(document).ready(function(){ $("#loginfield_ctrl").click(function(e){ var offset= $("#loginfield_ctrl").offset(); $("#loginfield_ctrl_menu").css({"left":offset.left-5,"top":offset.top+15}); $("#loginfield_ctrl_menu").fadeIn(); }); $("#loginfield_ctrl_menu").mouseleave(function(){ $("#loginfield_ctrl_menu").fadeOut(); flag=false; }); $("#loginfield_ctrl_menu").mouseover(function(){ flag=true; }); $("#loginfield_ctrl").mouseleave(function(){ setTimeout("checkStatus()", 500); }); $("#loginfield_ctrl_menu li").click(function(){ var index=$(this).index(); var text=$(this).text(); $("#loginfield_ctrl").text(text); $("option").val(index+1); }); }); </script> </head> <body> <div style="position: relative;left: 100px;top:200px"> <form action="www.baidu.com" method="get"> <span class="login_slct"> <select name="loginfield" style="float: left; display: none;" width="45" id="loginfield_LieJW" s> <option value="1" selected="selected"></option> </select> <a href="javascript:;" id="loginfield_ctrl" style="45px" tabindex="1">Email</a> </span> <input value="submit" type="submit" /> </form> </div> <div style="height: 200px"> asdfasfd </div> <div id="loginfield_ctrl_menu" class="sltm" style=" 50px;position: absolute; z-index: 301; display: none;"> <ul> <li>Email</li> <li>用户名</li> </ul> </div> </body> </html>
好久没用jquery了，写的很烂，但是大致逻辑实现了，希望哪位能优化下