2009.12.18——jquery例子简易导航栏

lipeng88213

浏览: 959522 次
性别:
来自: 北京

最近访客更多访客>>

jklwan

小小书僮

诗人lpp

oyhptiandi01

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (526)

社区版块

存档分类

jQuery HTML

2009.12.18——jquery例子简易导航栏
先看下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">
<title>导航栏</title>
<style type="text/css">
#menu {width: 100px}
.has_children{
	background: #555;
	color: #fff;
	cursor: pointer;
}
.highlight{
	color: #fff;
	background: green;
}
div{
	padding: 0;
	margin: 10px 0;
}
div a{
	background: #888;
	display: none;
	float: left;
	width: 100px;
}
</style>
</head>
<body>
	<div id="menu">
		<div class="has_children">
			<span>A组</span>
			<a>南非</a>
			<a>墨西哥</a>
			<a>乌拉圭</a>
			<a>法国</a>
		</div>
		<div class="has_children">
			<span>B组</span>
			<a>阿根廷</a>
			<a>尼日利亚</a>
			<a>韩国</a>
			<a>希腊</a>
		</div>
		<div class="has_children">
			<span>C组</span>
			<a>英格兰</a>
			<a>美国</a>
			<a>阿尔及利亚</a>
			<a>斯洛文尼亚</a>
		</div>
		<div class="has_children">
			<span>D组</span>
			<a>德国</a>
			<a>澳大利亚</a>
			<a>塞尔维亚</a>
			<a>加纳</a>
		</div>
	</div>
</body>
</html>

对了说一下我发现 <div><a>XXXX</a></div> 这样写的话<a>标签里面的不会显示就像上面html里面写的

一样
我的目标是点击A组后 A组后面的<a>标签都显示出来，然后点击B组后，A组会缩进，并且B组显示出来

jquery代码如下：

<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
	$('.has_children').click(function(){
		$(this).addClass("highlight").children("a").show().end()
		.siblings().removeClass("highlight").children("a").hide();
	});
	
});
</script>

但是我发现一个问题就是当A组已经展开时我再点击A组就没什么反应，但是我觉得它应该收起来这样会

更好一点，代码更动如下：

<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
	var $temp = $('.has_children');
	if($temp.hasClass("highlight")){
		$('.has_children').click(function(){
			$(this).removeClass("highlight").children("a").hide();
		});
	}else{
		$('.has_children').click(function(){
			$(this).addClass("highlight").children("a").show().end()
			.siblings().removeClass("highlight").children("a").hide();
		});
	}
	
});
</script>

但是点击展开的仍然不能收缩很是郁闷那位知道的话告诉我一声谢谢了

分享到：

2009.12.21(3)——css+div布局一 | 2009.12.17(4)——jquery例子全部显示与 ...

2009-12-18 11:22
浏览 2043
评论(2)
分类:编程语言
查看更多

2 楼 anrui 2010-04-20

1 楼 anrui 2010-04-20

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

2009.12.18——jquery例子简易导航栏

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

2009.12.18——jquery例子 简易导航栏

评论

发表评论

相关推荐

最近访客更多访客>>

2009.12.18——jquery例子简易导航栏