jQuery收缩展开菜单

jQuery展开收缩折叠导航菜单代码，代码简单易懂，这就不多作说明了，有问题可以评论留言互相讨论

分类：导航菜单 > 展开收缩难易：入门级

查看演示下载资源下载积分： 10 积分

CSS样式

JS文件及代码

<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var menuParent = $('.menu > .ListTitlePanel > div');//获取menu下的父层的DIV
	var menuList = $('.menuList');
	$('.menu > .menuParent > .ListTitlePanel > .ListTitle').each(function(i) {//获取列表的大标题并遍历
		$(this).click(function(){
			if($(menuList[i]).css('display') == 'none'){
				$(menuList[i]).slideDown(300);
			}
			else{
				$(menuList[i]).slideUp(300);
			}
		});
	});
});
</script>

html代码

<div class="menu">
		<div class="menuParent">
			<div class="ListTitlePanel">
				<div class="ListTitle">
					<strong>个人中心</strong>
					<div class="leftbgbt"> </div>
				</div>
			</div>
			<div class="menuList">
				<div> <a href="#">我的信息</a></div>
				<div> <a href="#">系统通知 </a> </div>
				<div> <a href="#">短信息</a></div>
			</div>
		</div>
		<div class="menuParent">
			<div class="ListTitlePanel">
				<div class="ListTitle">
					<strong>课程中心</strong>
					<div class="leftbgbt2"> </div>
				</div>
			</div>
			<div class="menuList">
				<div> <a href="#">我的课程</a></div>
				<div> <a href="#">课程资源</a></div>
				<div> <a href="#">班级统计</a></div>
				<div> <a href="#">课程题库</a></div>
			</div>
		</div>
		<div class="menuParent">
			<div class="ListTitlePanel">
				<div class="ListTitle">
					<strong>校内讨论</strong>
					<div class="leftbgbt2"> </div>
				</div>
			</div>
			<div class="menuList">
				<div> <a href="#">我的帖子</a></div>
				<div> <a href="#">新回复</a></div>
				<div> <a href="#">课程板块</a></div>
				<div> <a href="#">问答中心</a></div>
			</div>
		</div>
		<div class="menuParent">
			<div class="ListTitlePanel">
				<div class="ListTitle">
					<strong>资源中心</strong>
					<div class="leftbgbt2"> </div>
				</div>
			</div>
			<div class="menuList">
				<div> <a href="#">教学资源</a></div>
				<div> <a href="#">教学经历</a></div>
			</div>
		</div>
	</div>