<html>
<head>
<meta http-equiv=";Content-Type"; content="34;text/html; charset=utf-8" />
<title>基于dl dt dd 实现toggle 隐藏显示的方法</title>
<script type="text/javascript"; src="jquery-1.3.2.min.js";></script>
<style type="text/css">
.none{
display:none;
}
dl dt{cursor:pointer; font-weight:bold;}
</style>
</head>
<body>
<dl id="test">
<dt >栏目一</dt>
<dd>1.0</dd>
<dd>1.1</dd>
<dd>1.2</dd>
<dd>1.3</dd>
<dt>栏目二</dt>
<dd>2.1</dd>
<dd>2.3</dd>
<dd>2.3</dd>
</dl>
<script type="text/javascript">
$("#test dt").each(function(){
var dt = $(this);
//找到dt下的dd
var objList =new Array();
var tmpDD = dt.next();
while(tmpDD.attr("tagName")!=null && tmpDD.attr("tagName")!="DT")
{
objList.push(tmpDD);
tmpDD = tmpDD.next();
}
//alert(dt.html()+" 有:"+objList.length+"个dd");
dt.toggle(
function(){
$(objList).each(function(){
$(this).addClass("none");
});
},
function(){
$(objList).each(function(){
$(this).removeClass("none");
});
}
);
});