基於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>