jquery点击下拉菜单鼠标移开隐藏(可模拟下拉框)

来源：互联网发布：批发零售软件编辑：程序博客网时间：2024/06/05 22:49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){$("ul.subnav").parent().append("<span></span>");$("ul.topnav li span").click(function() { $(this).parent().find("ul.subnav").slideDown('fast').show(); $(this).parent().hover(function() {}, function(){$(this).parent().find("ul.subnav").slideUp('slow'); });}).hover(function() { $(this).addClass("subhover"); }, function(){$(this).removeClass("subhover"); });$("ul.subnav li").each(function(i){$(this).bind("click",function(){$(this).parent().parent().find("a.sname").text($(this).find("a").text());  $(this).parent().hide();}); });});</script><style type="text/css">body{margin:0;padding:0;font:10px normal Arial, Helvetica, sans-serif;}/* container */.container{ width:1200px; margin:0 auto;}ul.topnav{list-style:none;padding:0 20px;width:100%;height:35px;background:#222;font-size:1.2em;background:#08A3BC;}ul.topnav li{float:left;height:35px; width:120px; text-align:center; position:relative;}ul.topnav li a{padding:10px 5px;color:#fff;display:block;text-decoration:none;}ul.topnav li a:hover{background:#0C74F0;}ul.topnav li span{height:35px; width:120px; text-align:center; display:block; position:absolute; left:0; top:0;}ul.topnav li span.subhover{background-position:center bottom;cursor:pointer;} ul.topnav li ul.subnav{list-style:none;position:absolute;left:0;top:35px;background:#333;margin:0;padding:0;display:none;float:left;width:170px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;border:1px solid #111;}ul.topnav li ul.subnav li{margin:0;padding:0;border-top:1px solid #252525;border-bottom:1px solid #444;clear:both;width:170px;}ul.topnav li ul.subnav li a{float:left;width:145px;background:#333;padding-left:20px;}ul.topnav li ul.subnav li a:hover{background:#222;}</style></head><body><div class="container"><ul class="topnav"><li><a href="#">Home</a></li><li><a href="#" class="sname">Tutorials</a><ul style="display: none;" class="subnav"><li><a href="#">Sub Nav Link1</a></li><li><a href="#">Sub Nav Link2</a></li><li><a href="#">Sub Nav Link3</a></li><li><a href="#">Sub Nav Link4</a></li><li><a href="#">Sub Nav Link5</a></li></ul></li><li><a href="#" class="sname">Resources</a><ul style="display: none;" class="subnav"><li><a href="#">Sub Nav Link1</a></li><li><a href="#">Sub Nav Link2</a></li><li><a href="#">Sub Nav Link3</a></li><li><a href="#">Sub Nav Link4</a></li><li><a href="#">Sub Nav Link5</a></li></ul></li><li><a href="#">About Us</a></li><li><a href="#">Advertise</a></li><li><a href="#">Submit</a></li><li><a href="#">Contact Us</a></li></ul></div></body></html>
0 0