ネイティブJsとjqueryのマルチグループ処理、1つのblock_javascriptスキルの折りたたみ効果のみを拡張

要件は、同じページに複数の小さなブロックのグループ (固定されていない) があり、各グループのブロックの数が必ずしも同じである必要はありません。実際には、一度に 1 つのブロックのみが展開される必要があります。非常に簡単です。ナビゲーションをクリックし、そのブロックが非表示の場合は展開し、同時に同じグループ内の他のブロックを非表示にします。そのブロックが展開されている場合は、そのブロックを非表示にし、同時に 1 つのブロックを展開します。最初は、同じグループ内の他のブロックを単純に 2 回走査するだけで済むのではないかと考えました。しかし、冷静に考えてみると、現在のグループの関連要素を取得するのが合理的です。このアイデアに従って、最終的に機能が実現されました。時間の制約により、ネイティブ JS バージョンを書きました。実際、このアイデアにはあまり満足していません。もっと良いアイデアがあれば、教えてください。

これは、JS バージョンで h2 を取得したときに、実際のアプリケーションでは同じ効果が得られるものはなく、JS バージョンを使用するだけだと考えたためです。ここをクリックしてコア コード サンプルを表示します

コードをコピーします コードは次のとおりです:

//原生Js バージョン ***** start
window.onload=function(){
//共用関数数区
var iBase={
//document. getElementById
Id: function(name){return document.getElementById(name)},
//通过クラス获取元素
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 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{
null を返します。
}
},
//获取祖辈元素中符合指定样式的元素
親: function(elem,name){
var r=new RegExp('(^|\s )' 名前 '(|\s$)');
elem=elem.parentNode;
if(elem!=null){
return r.test(elem.className) ?要素 : iBase.Parent(要素,名前) || 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='ブロック';
listBox[i].getElementsByTagName('span')[0].innerHTML='-';
}
//遍历全点击项
for(var i=0; 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'){
//制御项展开状态下,隐藏当前,展开その他の第一项
//現在の時点では最初の
boxItem[elemIndex].style.display='none'; を再展開できないため、ここには展開 0/1 の判断があります。
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'); 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/ から来ました。