最简单的jQuery折叠菜单

最新推荐文章于 2022-05-25 19:12:26 发布

最新推荐文章于 2022-05-25 19:12:26 发布 · 748 阅读

文章标签：

#jQuery #JavaScript #XHTML #CSS #HTML #ViewUI

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和jQuery实现的简洁菜单布局及滑动展开效果的方法。该方法通过简单的DIV结构组织菜单及其子菜单，并利用jQuery为菜单项添加了点击事件，实现了内容区域的滑动显示和隐藏，同时确保同一时刻只有一个子菜单可见。

页面中的布局很简单，

利用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>

最终效果：