基于jquery实现的折叠式菜单

时间 2019-11-15
原文原文链接
一、源码

如下是源码，很方便的能引入的本身项目中javascript
<!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>jqueryTest</title>
<script type="text/javascript" src="../js/jquery-1.3.2.js" ></script>
<style type="text/css">
	body,div{ margin:0;padding:0;}
	#menu {width:200px;}
	.has_children{  
		 background:url(../image/bg_title.gif) no-repeat;
		 padding:8px 0 8px 25px;
		 font-weight:bold; 
		 cursor:pointer; 
		 margin:0;
		 display:block;
	}
	.highlight{
		 background:url(../image/bg_title_visited.gif) no-repeat;
		 padding:8px 0 8px 25px;
		 color:#f59000;
		 font-weight:bold; 
		 cursor:auto; 
		 margin:0;
		 display:block;
	}
	.highlight a{
		margin-top:10px;
	}
  a:hover {
		color: #000000;
		background-color:#dfdfdf;
		text-decoration:underline;
		font-weight:normal;
		margin-top:10px;
    }
	.has_children a{ 
		display:none; 
		width:auto;
	}
</style>
<script type="text/javascript">
 $(function(){
 	$(".has_children").click( function(){ //元素
		$(this).siblings().filter(".highlight").children("a").slideToggle("normal");
		$(this).end().siblings().filter(".highlight").children("a").slideToggle("normal");
		if($(this).children("a").is(":hidden"))//隐藏
		{
			$(this).children("a").slideToggle("normal");//slideToggle 隐藏或者显示
			$(this).removeClass("has_children");
			$(this).addClass("highlight");
		}else{
			$(this).children("a").slideToggle("normal");//slideToggle 隐藏或者显示
			$(this).removeClass("highlight");
			$(this).addClass("has_children");
		}
		$(this).siblings().filter(".highlight").removeClass("highlight").addClass("has_children");
	});
	
});
</script>
</head>

<body>
	<div id="menu">
		<div class="has_children">
			<span>研发中心</span>
			<a href="#">研发中心一部</a>
			<a href="#">研发中心二部</a>
			<a href="#">研发中心三部</a>
			<a href="#">研发中心四部</a>
			<a href="#">研发中心五部</a>
		</div>
		<div class="has_children">
			<span>销售部</span>
			<a href="#">华北区</a>
			<a href="#">华南区</a>
			<a href="#">东北区</a>
			<a href="#">江南区</a>
		</div>
		<div class="has_children">
			<span>行政部</span>
			<a href="#">行政部全部人员</a>
			<a href="#">行政部全部人1员</a>
			<a href="#">行政部全部人2员</a>
		</div>
		<div class="has_children">
			<span>行政1部</span>
			<a href="#">行政部全部人1员</a>
			<a href="#">行政部全部人11员</a>
			<a href="#">行政部全部人12员</a>
		</div>
	</div>
</body>
</html>
二、资源图片

所须要的两张图片css
基于jquery实现的折叠式菜单

一、源码

二、资源图片

三、执行效果
