基于jquery实现的折叠式菜单

最新推荐文章于 2024-09-02 17:27:54 发布

weixin_34234721

最新推荐文章于 2024-09-02 17:27:54 发布

阅读量227

点赞数

文章标签： javascript xhtml python ViewUI

原文链接：https://my.oschina.net/u/2391658/blog/712831

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、源码

以下是源码，很方便的能引入的自己项目中

<!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>