DIV CSS 佈局教程網

需求是, 同一個頁面, 有多組(不固定), 每組區塊數量不一定一樣的小區塊. 要求每次只展開一個區塊. 實現原理其實很簡單, 點擊導航, 若它的區塊為隱藏, 則展開它, 同時, 隱藏掉同組其他區塊; 若它的區塊為展開, 則隱藏它, 同時, 展開同組其他區塊中的一個. 一開始以為僅僅簡單的兩個遍歷就能搞定. 但事實並非如此. 冷靜思考了下, 通過點擊的元素取到當前組的相關元素, 再單獨處理當前組才合理. 順著這個思路, 功能終於實現了, 寫了原生Js版本, 用同樣的思路寫了個jQ版本. 時間關系, 寫的也比較零散, 就沒有封裝. 其實, 對這種思路也不是很滿意, 感覺太散了, 哪位大師有更好的思路請賜教.

jQ版區塊的標題, 會有一個Js錯誤, 那是因為獲取Js版下的h2時, 我偷了個懶, 把jQ的也遍歷進去了. 我想, 實際應用中, 也不會有人同一個效果, 一邊用Js一邊用jQ吧. 核心代碼點此查看樣例
復制代碼 代碼如下:
//原生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('+');
}
});
});
});

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