ESSAY / NOTE
JS折叠多组处理DIV
<script type="text/javascript" language="javascript">
window.onload=function(){
//共用函数区
var iBase={
//document.getElementById
Id: function(name){return document.getElementById(name)},
//通过class获取元素
GetByClass: function(name,tagName,elem){
var c=[];
var re=new RegExp('(^|\\s)'+name+'(|\\s$)');
var e=(elem || document).getElementsByTagName(tagName || '*');
for(var i=0; i<e.length; i++){
if(re.test(e[i].className)){
c.push(e[i]);
}
}
return c;
},
//获取样式属性
AttrStyle: function(elem,attr){
if(elem.attr){
return elem.style[attr];
}else if(elem.currentStyle){
return elem.currentStyle[attr];
}else if(document.defaultView && document.defaultView.getComputedStyle){
attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();
return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);
}else{
return null;
}
},
//获取祖辈元素中符合指定样式的元素
Parents: function(elem,name){
var r=new RegExp('(^|\\s)'+name+'(|\\s$)');
elem=elem.parentNode;
if(elem!=null){
return r.test(elem.className) ? elem : iBase.Parent(elem,name) || null;
}
},
//取索引值
Index: function(cur,obj){
for(var i=0; i<obj.length; i++){
if(obj[i]==cur){
return i;
}
}
}
}
//变量定义
var listBox=iBase.GetByClass('js','div');
var navItem=iBase.Id('demo').getElementsByTagName('h2');//此处将jQ区块中的h2也取到了,所以页面会有个小小的错误
var icoItem=null,boxItem=null,boxDisplay=null,elemIndex=null,elemParent=null;
//初始化展开第一个
for(var i=0; i<listBox.length;i++){
iBase.GetByClass('box','div',listBox[i])[0].style.display='block';
listBox[i].getElementsByTagName('span')[0].innerHTML='-';
}
//遍历所有点击项
for(var i=0; i<navItem.length;i++){
navItem[i].onclick=function(){
elemParent=iBase.Parents(this,'js');//获取当前点击所在区块
navItem=elemParent.getElementsByTagName('h2');//获取当前区块下的点击项
icoItem=elemParent.getElementsByTagName('span');//获取当前区块下的展开关闭
boxItem=iBase.GetByClass('box','div',elemParent);//获取需要控制的区块
elemIndex=iBase.Index(this,navItem);//获取当前点击在当前区块点击项中的索引
//切换展开关闭图标
icoItem[elemIndex].innerHTML= icoItem[elemIndex].innerHTML=='-' ? '+' : '-';
if(iBase.AttrStyle(boxItem[elemIndex],'display')=='block'){
//控制项展开状态下,隐藏当前,展开其他的第一项
//此处有个展开0/1的判断,因为当点击第一个时是不能再展开第一个的
boxItem[elemIndex].style.display='none';
if(elemIndex==0){
boxItem[1].style.display='block';
icoItem[1].innerHTML='-'
}else{
boxItem[0].style.display='block'
icoItem[0].innerHTML='-'
}
}else{
//控制项展开状态下,展开当前,隐藏其他项
boxItem[elemIndex].style.display='block';
for(var k=0;k<boxItem.length; k++){
if(k!=elemIndex){
boxItem[k].style.display='none';
icoItem[k].innerHTML='+';
}
}
}
}
}
}
</script>
<div id="demo">
<div class="listbox js">
<h2><span>+</span>总账账户和会计日历</h2>
<div class="boxanniu1">
<p>总账账户和会计日历总账账户和会计日历总账账户和会计日历总账账户和会计日历总账账户和会计日历总账账户和会计日历</p>
</div>
<h2><span>+</span>总账账户和会计日历</h2>
<div class="boxanniu1">
<p>总账账户和会计日历总账账户和会计日历总账账户和会计日历总账账户和会计日历总账账户和会计日历总账账户和会计日历</p></div>
<h2><span>+</span>总账账户和会计日历</h2>
<div class="boxanniu1">
<p>总账账户和会计日历总账账户和会计日历总账账户和会计日历总账账户和会计日历总账账户和会计日历总账账户和会计日历账户和会计日历总账账户和会计日历</p></div></div>
</div>
//外面包的DIVarchive31省略了 写的时候改下就行了
.archive31{ padding: 4%; font-family:Microsoft YaHei;}
.archive31 h1{ color:#43A140; font-size:5em;font-family:hyy; font-weight:bold; letter-spacing:0.1em;}
.archive31 ul li{ margin-top:2%;}
.archive31 .boxanniu1{ margin-top:1%; font-size:16px; letter-spacing:3px; display:none;}
.listbox h2 {
color:#43A140; font-size:3em; letter-spacing:0.3em; font-family:hyy; line-height:40px;
margin-top:3%;
}
.listbox h2 span{ width:40px; height:40px; line-height:36px; text-align:center; border-radius:100px; border:2px solid #43A140; float:left; margin-right:2%; cursor:pointer; padding-left:8px;}
@media all and (max-width: 890px) {
.archive31 h1{ font-size:4em; text-align:center;}
}