最简单的jQuery折叠菜单博客分类： jQuery jQueryJavaScriptXHTMLCSSHTML

程序员文章站 2024-02-03 13:26:34

...

页面中的布局很简单，

利用DIV来组成菜单，一个标题DIV对应一个内容DIV，大致布局如下图：
最简单的jQuery折叠菜单

博客分类： jQuery jQueryJavaScriptXHTMLCSSHTML

直接从代码处来查看吧！

<!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折叠菜单

博客分类： jQuery jQueryJavaScriptXHTMLCSSHTML