JQUERY简单的树形菜单制作

最新推荐文章于 2018-10-28 23:12:23 发布

丨Barneyx

最新推荐文章于 2018-10-28 23:12:23 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/baizengfei/article/details/24893389

版权

JQUERY 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<style type="text/css">
	.menu{width:300px;}
	.has_children{background:#555; color:#fff; cursor:pointer;}
	.highlight{color:#fff; background:green;}
	.div{padding:0px; margin:10px 0px;}
	div a{background:#888; display:none; float:left; width:300px;}

</style>
	<div class="menu">
		<div class="has_children">
			<span>第一章－认识 JQuery</span>
			<a>1.1－Javascript和Javascript库</a>
			<a>1.2－加入Jquery代码</a>
			<a>1.3－编写简单的JQUERY代码</a>
			<a>1.4－JQUERY对象和其他库的冲突</a>
			<a>1.5－JQUERY对象和DOM对象</a>
			<a>1.6－JQUERY开发工具和插件</a>
			<a>1.7－小结</a>
		</div>
		
		<div class="has_children">
			<span>第二章－认识 JQuery</span>
			<a>12.1－Javascript和Javascript库</a>
			<a>12.2－加入Jquery代码</a>
			<a>12.3－编写简单的JQUERY代码</a>
			<a>12.4－JQUERY对象和其他库的冲突</a>
			<a>12.5－JQUERY对象和DOM对象</a>
			<a>12.6－JQUERY开发工具和插件</a>
			<a>12.7－小结</a>
		</div>
		
		<div class="has_children">
			<span>第二章－认识 JQuery</span>
			<a>123.1－Javascript和Javascript库</a>
			<a>124.2－加入Jquery代码</a>
			<a>125.3－编写简单的JQUERY代码</a>
			<a>126.4－JQUERY对象和其他库的冲突</a>
			<a>127.5－JQUERY对象和DOM对象</a>
			<a>128.6－JQUERY开发工具和插件</a>
			<a>129.7－小结</a>
		</div>
		
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			//原理说明：
			/*
				首先我们要找到这个菜单的标题，在他的身上加上一个单击事件，
				之后的$(this)就代表着这个has_children对象，给他加上一个选中的状态，并将这个菜单下的所有的a标签显示出来； 
				写到这一步，我们的菜单就基本上写完了，但是现在有个问题就是我们单击后菜单就不会回去了，下面们我们在使用
				siblings（）这个函数也就是遍历同胞元素，去除掉所有同胞元素的样式，并且他们的菜单内容全部的隐藏掉！
			*/
			$(".has_children").click(function(){
				$(this).addClass("highlight").children("a").show().end();
				$(this).siblings().removeClass("highlight").children("a").hide();
			});
		});
	</script>
</body>
</html>