<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>菜单折叠</title>
</head>
<body>
<div id="zd">全部折叠</div><div id="zk">全部展开</div>
<div class="w"><h2>Hello</h2>
<span>HHHHHHHH</span>
<div>HHHHHHHH</div>
<div>HHHHHHHH</div>
</div>
<div class="w"><h2>Hello Again</h2>
<div>DDDD</div>
<div>DDDD</div>
<div>DDDD</div>
</div>
<div><h2>And Again</h2></div>
<div>siblings() 是选择同辈元素,$("h2").siblings()是和h2同级的元素</div>
<div>slideDown() 通过使用滑动效果,显示隐藏的被选元素。(down 放下,也就是展开)</div>
<div>slideUp() 通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。(up 折叠起来,也就是隐藏起来的意思)</div>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
$(function(){
$('h2').bind('click',function(){
$this = $(this);
if($this.siblings().is(':hidden')){
$this.siblings().slideDown('nomal');
}else if($this.siblings().is(':visible')){
$this.siblings().slideUp('normal');
}
});
$("#zd").click(function(){
$("h2").siblings().slideUp('normal');
});
$("#zk").click(function(){
$("h2").siblings().slideDown('normal');
});
});
</script>
</body>
</html>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>菜单折叠</title>
</head>
<body>
<div id="zd">全部折叠</div><div id="zk">全部展开</div>
<div class="w"><h2>Hello</h2>
<span>HHHHHHHH</span>
<div>HHHHHHHH</div>
<div>HHHHHHHH</div>
</div>
<div class="w"><h2>Hello Again</h2>
<div>DDDD</div>
<div>DDDD</div>
<div>DDDD</div>
</div>
<div><h2>And Again</h2></div>
<div>siblings() 是选择同辈元素,$("h2").siblings()是和h2同级的元素</div>
<div>slideDown() 通过使用滑动效果,显示隐藏的被选元素。(down 放下,也就是展开)</div>
<div>slideUp() 通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。(up 折叠起来,也就是隐藏起来的意思)</div>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
$(function(){
$('h2').bind('click',function(){
$this = $(this);
if($this.siblings().is(':hidden')){
$this.siblings().slideDown('nomal');
}else if($this.siblings().is(':visible')){
$this.siblings().slideUp('normal');
}
});
$("#zd").click(function(){
$("h2").siblings().slideUp('normal');
});
$("#zk").click(function(){
$("h2").siblings().slideDown('normal');
});
});
</script>
</body>
</html>