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

效果图：

所用背景图：

查看全文

相关阅读:
让Div居中的方法
 创建对象的几种方式
 [Gport]2014移动互联网趋势——100名CEO的一句话解读
 专访腾讯云陈磊：微信云助力企业转型把握O2O时代价值
 Head First Python 学习笔记（第二章：分享你的代码）
Head First Python 学习笔记（第一章：使用IDLE来帮助学习Python）
《写给大家看的设计书》学习笔记
 用TreeView以递归显示选择磁盘上文件夹中全部文件夹和文件
 WebBrowser实现：自动填充网页上的用户名和密码并点击登录按钮
 C#调用免费天气预报WebService

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