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

效果图：

所用背景图：

查看全文

相关阅读:
mysql主从只同步部分库或表
 springboot~aspect通过@annotation进行拦截
 ELK~fluentd将日志文件增量读到es里
 怎么自学 Java ？和盘托出
 一个后端开发的 Vue 笔记【入门级】
企业级数据大屏设计如何实现
 Vue.js官方中文教程
 vue学习笔记 ---- 系列文章
 基于Asp.net core Kestrel的超迷你http服务器 ---- AServer
Docker学习—概念及基本应用

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