js简单的抽屉菜单

最新推荐文章于 2021-09-19 18:25:34 发布

weixin_34179762

最新推荐文章于 2021-09-19 18:25:34 发布

阅读量152

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/bdstjk/archive/2011/10/12/2519888.html

版权

闲暇时间用Jquery写了一个js简单的抽屉菜单。。

<!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> <title>抽屉菜单</title> <style type="text/css"> .MenuPanel { padding-bottom:20px; } .MenuTitle { width:150px; height:30px; font-size:20px; padding-left:10px; padding-top:5px; background:url(image/index_x.png) repeat-x 0px -673px; border:#ffbc66 1px solid; } .MenuContent { width:108px; font-size:16px; padding:20px 10px 20px 40px; border:#ffbc66 1px solid; } </style> <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".MenuPanel").each(function(){ $(this).children(".MenuContent").hide(); }); $(".MenuTitle").each(function(){ $(this).click(function(){ if($(this).parents(".MenuPanel").children(".MenuContent").css("display") != "none"){ $(this).parents(".MenuPanel").children(".MenuContent").hide("slow"); }else{ $(".MenuPanel").each(function(){ $(this).children(".MenuContent").hide(); }); $(this).parents(".MenuPanel").children(".MenuContent").show("slow"); } }); }); }); </script> </head> <body> <form id="form1"> <div> <div class="MenuPanel"> <div class="MenuTitle">第一菜单</div> <div class="MenuContent"> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a> </div> </div> <div class="MenuPanel"> <div class="MenuTitle">第二菜单</div> <div class="MenuContent"> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a> </div> </div> <div class="MenuPanel"> <div class="MenuTitle">第三菜单</div> <div class="MenuContent"> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a> </div> </div> <div class="MenuPanel"> <div class="MenuTitle">第四菜单</div> <div class="MenuContent"> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br /> <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a> </div> </div> </div> </form> </body> </html>

下载地址：http://download.csdn.net/detail/bdstjk/3583116

jquery可以自己去官方下载，这里也贴一个：http://download.csdn.net/detail/bdstjk/3649368

效果图：