原生Js与jquery的多组处理, 仅展开一个区块的折叠效果

　　//原生Js版本 ***** start

　　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='+';

　　}

　　}

　　}

　　}

　　}

　　}

　　//jQuery版本 ***** start

　　$(function(){

　　//变量定义区

　　var _listBox=$('.jq');

　　var _navItem=$('.jq>h2');

　　var _boxItem=null, _icoItem=null, _parents=null, _index=null;

　　//初始化第一个展开

　　_listBox.each(function(i){

　　$(this).find('div.box').eq(0).show();

　　$(this).find('h2>span').eq(0).text('-');

　　});

　　//遍历所有的点击项

　　_navItem.each(function(i){

　　$(this).click(function(){

　　//找到当前点击父元素为listbox(单个区块)的元素

　　_parents=$(this).parents('.listbox');

　　_navItem=_parents.find('h2');//此区块中的点击项

　　_icoItem=_parents.find('span');//此区块中的展开关闭图标

　　_boxItem=_parents.find('div.box');//此区块中展开关闭项

　　_index=_navItem.index(this);//取得当前点击在当前区块下点击项中的索引值

　　if(_boxItem.eq(_index).is(':visible')){

　　//若当前点击项下的展开关闭项是显示的,则关闭,同时展开另外项中的第一个

　　_boxItem.eq(_index).hide().end().not(':eq('+_index+')').first().show();

　　_icoItem.eq(_index).text('+').end().not(':eq('+_index+')').first().text('-');

　　}else{

　　//若当前点击项下的展开关闭项是隐藏的,则展开,同时隐藏其他项

　　_boxItem.eq(_index).show().end().not(':eq('+_index+')').hide();

　　_icoItem.eq(_index).text('-').end().not(':eq('+_index+')').text('+');

　　}

　　});

　　});

　　});