無限折りたたみメニューのサンプルコードをjsの汎用メソッドからオブジェクト指向メソッドに書き換えた_javascriptスキル

この例は他の人の例に基づいています。その人は無限折りたたみメニューを作成するために一般的な方法を使用したことがわかりました。あらかじめ感謝しておきます。その後、いくつかの簡略化した変更を加え、元の例をオブジェクト指向のアプローチに変更しました。例内の小さな展開アイコンと閉じたアイコンは、効果を見やすくするために自分で再追加できます。

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

很实用JS CSS多级树形展开菜单 body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} ul,li,{margin:0;padding:0;} ul {list-style:none;} a{text-decoration: none;} #root{margin:10px;width:200px;overflow:hidden;} #root li{line-height: 25px;} #root .rem{padding-left:16px;} #root .add{background:url(treeico.gif) -4px -31px no-repeat;} #root .ren {background:url(treeico.gif) -4px -7px no-repeat;} #root li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this) .blur());} #root .two{padding-left:20px;display:none;}

校讯通 沈阳市 二小 二年级 三年级 一班 张三 王五 班长 学习委员 实验班 抚顺市 二小 一中

/**一般JSメソッド function addEvent(el,name,fn){//绑定イベント if(el.addEventListener) return el.addEventListener(name,fn,false); return el.attachEvent('on' name,fn); } function nextnode(node){//寻找下一兄弟并剔除空的文本节点 if(!node)return ; if(node.nodeType == 1) ノードを返します。 if(node.nextSibling) return nextnode(node.nextSibling); } function prevnode(node){//寻找上一兄弟并剔除空的文本节点 if(!node)return ; if(node.nodeType == 1) ノードを返します。 if(node.previousSibling) return prevnode(node.previousSibling); } addEvent(document.getElementById('root'),'click',function(e){//绑定点击イベント，使用root根元素代理 e = e||window.event ; var target = e.target||e.srcElement; var tp = nextnode(target.parentNode.nextSibling); case 'A':/ /点击A标签展开和收缩树形目录，并改その样式 if(tp&&tp.nodeName == 'UL'){ if(tp.style.display != 'block' ){ tp.style.display = 'block'; prevnode(target.parentNode.previousSibling).className = 'ren' }else{ tp.style.display = 'none'; (target.parentNode.previousSibling).className = 'add' } } break; case 'SPAN'://アイコンをクリックすると拡大または縮小のみ可能です var ap = nextnode(target.nextSibling).nextSibling); if(ap.style. display ! = 'block' ){ ap.style.display = 'block'; target.className = 'ren' }else{ ap.style.display = 'none'; target.className = 'add' } break; } }); window.onload = function(){// ページを読み込むときに要素を指定します。子ノード アイコンを動的に追加します var label = document.getElementById('root').getElementsByTagName('label'); for(var i=0;i varスパン = document.createElement('span'); span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer;'; span.innerHTML = ' ' span.className = 'add'; if(nextnode(labels[i].nextSibling)&&nextnode(labels[i].nextSibling).nodeName == 'UL'; >labels [i].parentNode.insertBefore(span,labels[i]); else labels[i].className = 'rem' } } **/ //オブジェクト指向メソッド var Tree = function(o){ this.root = document.getElementById(o); this.labels = this.root.getElementsByTagName('label') ; var that = this; Tree.prototype.addEvent(this.root,'click',function(e){that.treeshow(e)}); 🎜>} Tree.prototype = { int:function(){// for(var i=0;i var span = document.createElement('span'); span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width: 16px; カーソル:ポインタ;'; span.innerHTML = ' ' span.className = 'add'; if(this.labels[i].nextSibling)&&this.nextnode( this.labels[i].nextSibling).nodeName == 'UL') this.labels[i].parentNode.insertBefore(span,this.labels[i]); else this. label[ i].className = 'rem' } }, treeshow:function(e){ e = e||window.event; var target = e.target; || e.srcElement; var tp = this.nextnode(target.parentNode.nextSibling); switch(target.nodeName){ case 'A'://A ラベルをクリックして展開しますツリー ディレクトリを縮小し、そのスタイルを変更します。 if(tp&&tp.nodeName == 'UL'){ if(tp.style.display != 'block' ){ tp.style.display = 'block'; this.prevnode(target.parentNode.previousSibling).className = 'ren' }else{ tp.style.display = 'none'; .parentNode.previousSibling) ).className = 'add' } } break; case 'SPAN'://アイコンをクリックしてのみ拡大または縮小します var ap = this .nextnode(this.nextnode( target.nextSibling).nextSibling); if(ap.style.display != 'block' ){ ap.style.display = 'block'; className = 'ren' }else{ ap.style.display = 'none'; target.className = 'add' } break; }, addEvent: function(el,name,fn){//バインディング イベント if(el.addEventListener) return el.addEventListener(name,fn,false); return el.attachEvent(' on' name,fn) ; }, nextnode:function(node){//次の兄弟を検索し、空のテキスト ノードを削除します if(!node)return ; if(node. nodeType == 1) return ノード; if(node.nextSibling) return this.nextnode(node.nextSibling); prevnode:function(node);前の兄弟を検索し、空のテキスト ノードを削除します。 if(!node)return ; if(node.nodeType == 1) return node; if(node.previousSibling) return prevnode(node.previousSibling); } } tree = new Tree("root");//インスタンス化されたアプリケーション >