//原生Js版本 ***** start
window.onload=function(){
//共用函數(shù)區(qū)
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區(qū)塊中的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');//獲取當(dāng)前點擊所在區(qū)塊
navItem=elemParent.getElementsByTagName('h2');//獲取當(dāng)前區(qū)塊下的點擊項
icoItem=elemParent.getElementsByTagName('span');//獲取當(dāng)前區(qū)塊下的展開關(guān)閉
boxItem=iBase.GetByClass('box','div',elemParent);//獲取需要控制的區(qū)塊
elemIndex=iBase.Index(this,navItem);//獲取當(dāng)前點擊在當(dāng)前區(qū)塊點擊項中的索引
//切換展開關(guān)閉圖標(biāo)
icoItem[elemIndex].innerHTML= icoItem[elemIndex].innerHTML=='-' ? '+' : '-';
if(iBase.AttrStyle(boxItem[elemIndex],'display')=='block'){
//控制項展開狀態(tài)下,隱藏當(dāng)前,展開其他的第一項
//此處有個展開0/1的判斷,因為當(dāng)點擊第一個時是不能再展開第一個的
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{
//控制項展開狀態(tài)下,展開當(dāng)前,隱藏其他項
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(){
//變量定義區(qū)
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(){
//找到當(dāng)前點擊父元素為listbox(單個區(qū)塊)的元素
_parents=$(this).parents('.listbox');
_navItem=_parents.find('h2');//此區(qū)塊中的點擊項
_icoItem=_parents.find('span');//此區(qū)塊中的展開關(guān)閉圖標(biāo)
_boxItem=_parents.find('div.box');//此區(qū)塊中展開關(guān)閉項
_index=_navItem.index(this);//取得當(dāng)前點擊在當(dāng)前區(qū)塊下點擊項中的索引值
if(_boxItem.eq(_index).is(':visible')){
//若當(dāng)前點擊項下的展開關(guān)閉項是顯示的,則關(guān)閉,同時展開另外項中的第一個
_boxItem.eq(_index).hide().end().not(':eq('+_index+')').first().show();
_icoItem.eq(_index).text('+').end().not(':eq('+_index+')').first().text('-');
}else{
//若當(dāng)前點擊項下的展開關(guān)閉項是隱藏的,則展開,同時隱藏其他項
_boxItem.eq(_index).show().end().not(':eq('+_index+')').hide();
_icoItem.eq(_index).text('-').end().not(':eq('+_index+')').text('+');
}
});
});
});