Multi-group processing of native Js and jquery, only expand the folding effect of one block_javascript skills

The requirement is that the same page has multiple groups (not fixed) of small blocks, and the number of blocks in each group is not necessarily the same. It is required that only one block is expanded at a time. The implementation principle is actually very simple, click on the navigation, if its block If it is hidden, expand it, and at the same time, hide other blocks in the same group; if its block is expanded, hide it, and at the same time, expand one of the other blocks in the same group. At first, I thought it was just a simple two traversals It can be done. But it is not the case. After thinking calmly, it is reasonable to get the relevant elements of the current group through the clicked element, and then process the current group separately. Following this idea, the function was finally realized, and the native Js version was written. I wrote a jQ version using the same idea. Due to time constraints, the writing was relatively scattered and there was no encapsulation. In fact, I am not very satisfied with this idea. It feels too scattered. If any master has a better idea, please enlighten me.

There will be a Js error in the title of the jQ version block. That’s because when I got the h2 under the Js version, I was lazy and traversed the jQ one too. I thought, In actual applications, no one will have the same effect, just use JS and jQ at the same time. Click here to view the core code sample

Copy code The code is as follows:

//原生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(' ');
}
});
});
});

Demo address: http://demo.jb51.net/js/jsjq-flod-onlyone/index.htm
Package download: http://www.jb51. net/jiaoben/33950.html
I come from Mr.Think’s blog http://mrthink.net/jsjq-flod-onlyone/