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

标签:活动介绍    日期:2018-02-16 23:18    录入:美娱国际平台注册    浏览:

  

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

  需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏, 则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时, 展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定. 但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素, 再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原生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('+');  
}  
});  
});  
});  
  
演示地址:  
打包下载:  
本人来自Mr.Think的博客

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
相关文章阅读
点击右上角的分享按钮即可收藏美娱国际平台注册 随时随地与好友一起分享精彩内容噢