原生Js與jquery的多組處理,僅展開(kāi)一個(gè)區(qū)塊的折疊效果_javascript技巧

需求是, 同一個(gè)頁(yè)面, 有多組(不固定), 每組區(qū)塊數(shù)量不一定一樣的小區(qū)塊. 要求每次只展開(kāi)一個(gè)區(qū)塊. 實(shí)現(xiàn)原理其實(shí)很簡(jiǎn)單, 點(diǎn)擊導(dǎo)航, 若它的區(qū)塊為隱藏, 則展開(kāi)它, 同時(shí), 隱藏掉同組其他區(qū)塊; 若它的區(qū)塊為展開(kāi), 則隱藏它, 同時(shí), 展開(kāi)同組其他區(qū)塊中的一個(gè). 一開(kāi)始以為僅僅簡(jiǎn)單的兩個(gè)遍歷就能搞定. 但事實(shí)并非如此. 冷靜思考了下, 通過(guò)點(diǎn)擊的元素取到當(dāng)前組的相關(guān)元素, 再單獨(dú)處理當(dāng)前組才合理. 順著這個(gè)思路, 功能終于實(shí)現(xiàn)了, 寫(xiě)了原生Js版本, 用同樣的思路寫(xiě)了個(gè)jQ版本. 時(shí)間關(guān)系, 寫(xiě)的也比較零散, 就沒(méi)有封裝. 其實(shí), 對(duì)這種思路也不是很滿(mǎn)意, 感覺(jué)太散了, 哪位大師有更好的思路請(qǐng)賜教.

jQ版區(qū)塊的標(biāo)題, 會(huì)有一個(gè)Js錯(cuò)誤, 那是因?yàn)楂@取Js版下的h2時(shí), 我偷了個(gè)懶, 把jQ的也遍歷進(jìn)去了. 我想, 實(shí)際應(yīng)用中, 也不會(huì)有人同一個(gè)效果, 一邊用Js一邊用jQ吧. 核心代碼點(diǎn)此查看樣例
代碼如下:
//原生Js版本 ***** start
window.onload=function(){
//共用函數(shù)區(qū)
var iBase={
//document.getElementById
Id: function(name){return document.getElementById(name)},
//通過(guò)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也取到了,所以頁(yè)面會(huì)有個(gè)小小的錯(cuò)誤
var icoItem=null,boxItem=null,boxDisplay=null,elemIndex=null,elemParent=null;
//初始化展開(kāi)第一個(gè)
for(var i=0; i < listBox.length;i++){
iBase.GetByClass('box','div',listBox[i])[0].style.display='block';
listBox[i].getElementsByTagName('span')[0].innerHTML='-';
}
//遍歷所有點(diǎn)擊項(xiàng)
for(var i=0; i < navItem.length;i++){
navItem[i].onclick=function(){
elemParent=iBase.Parents(this,'js');//獲取當(dāng)前點(diǎn)擊所在區(qū)塊
navItem=elemParent.getElementsByTagName('h2');//獲取當(dāng)前區(qū)塊下的點(diǎn)擊項(xiàng)
icoItem=elemParent.getElementsByTagName('span');//獲取當(dāng)前區(qū)塊下的展開(kāi)關(guān)閉
boxItem=iBase.GetByClass('box','div',elemParent);//獲取需要控制的區(qū)塊
elemIndex=iBase.Index(this,navItem);//獲取當(dāng)前點(diǎn)擊在當(dāng)前區(qū)塊點(diǎn)擊項(xiàng)中的索引
//切換展開(kāi)關(guān)閉圖標(biāo)
icoItem[elemIndex].innerHTML= icoItem[elemIndex].innerHTML=='-' ? '+' : '-';
if(iBase.AttrStyle(boxItem[elemIndex],'display')=='block'){
//控制項(xiàng)展開(kāi)狀態(tài)下,隱藏當(dāng)前,展開(kāi)其他的第一項(xiàng)
//此處有個(gè)展開(kāi)0/1的判斷,因?yàn)楫?dāng)點(diǎn)擊第一個(gè)時(shí)是不能再展開(kāi)第一個(gè)的
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{
//控制項(xiàng)展開(kāi)狀態(tài)下,展開(kāi)當(dāng)前,隱藏其他項(xià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;

//初始化第一個(gè)展開(kāi)
_listBox.each(function(i){
$(this).find('div.box').eq(0).show();
$(this).find('h2>span').eq(0).text('-');
});

//遍歷所有的點(diǎn)擊項(xiàng)
_navItem.each(function(i){
$(this).click(function(){
//找到當(dāng)前點(diǎn)擊父元素為listbox(單個(gè)區(qū)塊)的元素
_parents=$(this).parents('.listbox');
_navItem=_parents.find('h2');//此區(qū)塊中的點(diǎn)擊項(xiàng)
_icoItem=_parents.find('span');//此區(qū)塊中的展開(kāi)關(guān)閉圖標(biāo)
_boxItem=_parents.find('div.box');//此區(qū)塊中展開(kāi)關(guān)閉項(xiàng)
_index=_navItem.index(this);//取得當(dāng)前點(diǎn)擊在當(dāng)前區(qū)塊下點(diǎn)擊項(xiàng)中的索引值
if(_boxItem.eq(_index).is(':visible')){
//若當(dāng)前點(diǎn)擊項(xiàng)下的展開(kāi)關(guān)閉項(xiàng)是顯示的,則關(guān)閉,同時(shí)展開(kāi)另外項(xiàng)中的第一個(gè)
_boxItem.eq(_index).hide().end().not(':eq('+_index+')').first().show();
_icoItem.eq(_index).text('+').end().not(':eq('+_index+')').first().text('-');
}else{
//若當(dāng)前點(diǎn)擊項(xiàng)下的展開(kāi)關(guān)閉項(xiàng)是隱藏的,則展開(kāi),同時(shí)隱藏其他項(xiàng)
_boxItem.eq(_index).show().end().not(':eq('+_index+')').hide();
_icoItem.eq(_index).text('-').end().not(':eq('+_index+')').text('+');
}
});
});
});

演示地址：http://demo.jb51.net/js/jsjq-flod-onlyone/index.htm
打包下載：http://www.gxlcms.com/jiaoben/33950.html
本人來(lái)自Mr.Think的博客 http://mrthink.net/jsjq-flod-onlyone/

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com