最简单的jQuery折叠菜单

gogole_09 · 发表于 2013-2-7 20:47:12

页面中的布局很简单，
利用DIV来组成菜单，一个标题DIV对应一个内容DIV，大致布局如下图：

直接从代码处来查看吧！

<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>The title</title><STYLE TYPE="text/css">.menu_head{width:350px;padding: 8px 10px;cursor: pointer;position: relative;margin:1px;font-weight:bold;background: #93cdff;}.menu_body{display:none;width:350px;}.menu_body a{padding:8px 0px;display:block;color:#006699;background-color:#EFEFEF; padding-left:10px;font-weight:bold;text-decoration:none;}.menu_body a:hover{color:#7fb2f4;background-color:#dfdfdf;text-decoration:underline;}</STYLE> <script type="text/javascript" src="jquery.js"> </script><script type="text/javascript" >$().ready(function(){$(".menu_head").click(function(){//通过next(".menu_body") 获得对应的内容DIV，让其具有“滑动”效果// 再通过siblings(".menu_body")获得所有同级的内容DIV，让其滑动着隐藏起来，（同一时间，只有一个内容DIV显示出来）$(this).next(".menu_body").slideToggle(300).siblings(".menu_body").slideUp("slow");});}); </script> <body><div class="menu_head">菜单一</div><div class="menu_body"><a href="#">子菜单1</a><a href="#">子菜单2</a><a href="#">子菜单3</a></div><div class="menu_head">菜单二</div> <div class="menu_body"><a href="#">子菜单1</a><a href="#">子菜单2</a><a href="#">子菜单3</a></div><div class="menu_head">菜单三</div> <div class="menu_body"><a href="#">子菜单1</a><a href="#">子菜单2</a><a href="#">子菜单3</a></div> </body></html>

最终效果：

=============================================

		自动登录	找回密码
密码			立即注册

最简单的jQuery折叠菜单

浏览过的版块