`

2009.12.18——jquery例子 简易导航栏

jQueryHTML 
阅读更多
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.17(4)——jquery例子 全部显示与 ...
评论
2 楼 anrui 2010-04-20  
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
$(function(){  
    $('.has_children').click(function(){  
   //var $temp = $('.has_children');  
    if($(this).hasClass("highlight")){  
            $(this).removeClass("highlight").children("a").hide();  
    }else{  
            $(this).addClass("highlight").children("a").show().end()  
            .siblings().removeClass("highlight").children("a").hide();  
    }  
    });  
      
});  
</script>
1 楼 anrui 2010-04-20  
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
$(function(){  
    $('.has_children').click(function(){  
         //var $temp = $('.has_children');  
if($(this).hasClass("highlight")){  
  $(this).removeClass("highlight").children("a").hide();  
}else{  
  $(this).addClass("highlight").children("a").show().end()  
  .siblings().removeClass("highlight").children("a").hide();  
}  
    });  
      
});  
</script> 
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics