js简单的抽屉菜单

zoukankan html css js c++ java

js简单的抽屉菜单

<p>闲暇时间用Jquery写了一个js简单的抽屉菜单。。</p><p> </p><!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 { 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 { 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

效果图：

所用背景图：

查看全文

相关阅读:
springmvc完成ajax功能以及返回字符串出现乱码的解决方法
 修改controller保存数据的作用域
 controller的数据保存
 sringmvc接收日期参数
 常见的几种HandlerMapping
springmvc的流程
 mvc的流程
 为实体类定义别名以及批量为某个包里面的实体类设置别名
 添加日志文件
 JSP页面添加当前时间

原文地址：https://www.cnblogs.com/bdstjk/p/2519888.html

最新文章
704. Binary Search
441. Arranging Coins
遍历线程上课代码
 线程池
 完成端口
 异步IO调用
 异步IO
双进程守护
 模块遍历
 04 WM_CTLCOLOR消息Dlg