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

效果图：

所用背景图：

查看全文

相关阅读:
C++每次读取一行字符串输入（学习笔记）（转）
Ubuntu使用Windows下的conio.h
容斥原理、欧拉函数、phi
UVa1635
转：用STL中的vector动态开辟二维数组
 [转载]Vector用法（C++ Primer中文版）
c++中vector的pair与make_pair的使用，双关键字排序
 uva12716 GCD XOR
在 Ubuntu 14.04 中安装 Pepper Flash Player For Chromium
Careercup

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