容易的二级导航树

简单的二级导航树
文件清单

jquery-1.6.2.js
navigation.js
main.css
navigation.html

直接上代码

引用

navigation.js代码

$(function(){
	Navigation_init();
});

Navigation_init = function (){
	//依次为事件链接初始化index，以便区分触发事件导航
	$('ul.root_ul a.root_a').each(function(index,element){
		$(this).attr('index',index);
	});
	$('ul.child_ul a.child_a').each(function(index,element){
		$(this).attr('index',index);
	});
	//绑定点击事件
	$('ul.root_ul a.root_a').click(function(){
		AdjustCss(this);
		var ul = $(this).siblings('ul');
		var show = ul.is(':visible');
		var i = $(this).attr('index');
		if (!show) {
			$('ul.root_ul a.root_a:lt(' + i + ')').siblings('ul').slideUp(400);
			$('ul.root_ul a.root_a:gt(' + i + ')').siblings('ul').slideUp(400);
			$(this).siblings('ul').slideDown(400);
		}
		Event_execute(i,'level0_a');
	});
	//绑定点击事件
	$('ul.child_ul a.child_a').click(function(){
		AdjustCss(this);
		var ul = $(this).siblings('ul');
		var show = ul.is(':visible');
		var i = $(this).attr('index');
		if (!show) {
			$('ul.child_ul a.child_a:lt(' + i + ')').siblings('ul').slideUp(400);
			$('ul.child_ul a.child_a:gt(' + i + ')').siblings('ul').slideUp(400);
			$(this).siblings('ul').slideDown(400);
		}
		Event_execute(i,'level1_a');
	});
}

/**
 * 调节选择后的样式 
 * @param item
 */
AdjustCss = function(item){
	$('ul.root_ul').find('a.root_a').each(function(index, element) {
		if ($(this).attr("class").indexOf("selected") >= 0) {
			$(this).removeClass('selected');
		};
	});
	$('ul.child_ul').find('a.child_a').each(function(index, element) {
		if ($(this).attr("class").indexOf("selected") >= 0) {
			$(this).removeClass('selected');
		};
	});
	$(item).addClass("selected") 
}

/**
 * 触发事件后要执行函数
 * @param index
 * @param level
 */
Event_execute = function(index,level){
	$('#content').html($('a[index='+index+'][class~='+level+']').text());
}

引用

main.css代码

@CHARSET "UTF-8";
body{margin:0 auto;padding:0;font-size:12px;font-family:Arial '宋体'}
ul,li{list-style:none; width:140px;padding:0;margin:0;}
.navigation{margin:0;padding:5px;width:150px;display:block;float:left;background-color:#FFFFFF;}
ul.root_ul{float:left;list-style: none;}
li.root_li{float:left;margin:0 0 1px 0; border-bottom:1px solid  #D7D7D7;}
li.root_li:last-child{border-bottom:medium none;}
ul li.root_li a.selected{color:#ea3234;text-decoration:none;}
ul li.root_li a{width:140px;height:15px;display:block;float:left;outline-style: none;text-decoration:none;color:#666666;background-color:#E6E6E6;font-size:15px;padding:5px 0;}
ul li.root_li a:hover{color:#ea3234;cursor: pointer;outline-style: none;text-decoration:underline;}
ul.child_ul{float:left;list-style:none inside none;padding:0 0 1 0;}
li.child_li{height:25px;display:block;float:left;border-bottom:1px dotted #666666;}
li.child_li:last-child{border-bottom:medium none;}
ul li.child_li a.selected{color:#ea3234;text-decoration:none;}
ul li.child_li a{width:130px;height:12px;outline-style: none;text-decoration:none;color:#666666;background-color:#FFFFFF;font-size:12px;padding:5px 0 5px 10px; }
ul li.child_li a:hover{color:#ea3234;cursor: pointer;outline-style: none;text-decoration:underline;}
.hide{display:none;}
.show{display:block;}

引用

navigation.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/main.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.6.2.js" ></script>
<script type="text/javascript" src="js/navigation.js" ></script>
<title>Insert title here</title>
</head>
<body>
<div class="navigation">
	<ul class="root_ul">
		<li class="root_li">
			<a href="#" class="root_a level0_a"><span>导航一</span></a>
			<ul class="child_ul hide">
				<li class="child_li"><a href="#" class="child_a level1_a">一组</a>
					<ul class="child_ul hide">
						<li class="child_li"><a href="#" class="child_a level1_a">一组</a></li>
						<li class="child_li"><a href="#" class="child_a level1_a">二组</a></li>
						<li class="child_li"><a href="#" class="child_a level1_a">三组</a></li>
						<li class="child_li"><a href="#" class="child_a level1_a">四组</a></li>
					</ul>
				</li>
				<li class="child_li"><a href="#" class="child_a level1_a">二组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">三组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">四组</a></li>
			</ul>
		</li>
		<li class="root_li">
			<a href="#"  class="root_a level0_a"><span>导航二</span></a>
			<ul class="child_ul hide">
				<li class="child_li"><a href="#" class="child_a level1_a">一组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">二组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">三组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">四组</a></li>
			</ul>
		</li>
		<li class="root_li">
			<a href="#"  class="root_a level0_a"><span>导航三</span></a>
			<ul class="child_ul hide">
				<li class="child_li"><a href="#" class="child_a level1_a">一组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">二组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">三组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">四组</a></li>
			</ul>
		</li>
		<li class="root_li">
			<a href="#" class="root_a level0_a"><span>导航四</span></a>
			<ul class="child_ul hide">
				<li class="child_li"><a href="#" class="child_a level1_a">一组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">二组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">三组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">四组</a></li>
			</ul>
		</li>
	</ul>
</div>
<div id='content'></div>
</body>
</html>

容易的二级导航树

相关推荐