<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ列表</title>
<style type="text/css">
div {display:none;}
</style>
</head>
<body>
<ul id="ul1">
<li>
<h3>分组一</h3>
<div>
<ul>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
<li>444444444</li>
</ul>
</div>
</li>
<li>
<h3>分组一</h3>
<div>
<ul>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
<li>444444444</li>
</ul>
</div>
</li>
<li>
<h3>分组一</h3>
<div>
<ul>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
<li>444444444</li>
</ul>
</div>
</li>
<li>
<h3>分组一</h3>
<div>
<ul>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
<li>444444444</li>
</ul>
</div>
</li>
</ul>
<script type="text/javascript">
var oUl=document.getElementById('ul1');
var aH3=oUl.getElementsByTagName('h3');
var aDiv=oUl.getElementsByTagName('div');
for (var i = 0; i < aH3.length; i++) {
aH3[i].index=i;
aH3[i].bBtn=true; //为了不相互影响,因此给每一个h3都设定一个true开关。
aH3[i].onclick=function(){
if (this.bBtn) {
aDiv[this.index].style.display="block";
this.bBtn=false;
} else{
aDiv[this.index].style.display="none";
this.bBtn=true;
};
}
};
</script>
</body>
</html>
qq列表,每组之间互不干扰
最新推荐文章于 2024-07-22 04:20:18 发布