``` var box = document.getElemenById("box"); var spanList = box.getElementsByTagName("span"); for(var i=0;i<span.List.length;++i){ var curSpan = spanList[i]; var curPre = utils.prev(curSpan); //->獲取當前的span的上一個哥哥元素節點 if(curPre&&curPre.tagName.toLowerCase()==='em'){ curSpan.style.cursor = "pointer"; } } ``` 使用時間委托實現展開子級 ``` box.onclick = function(e){ e = e||window.event; var tar = e.target||e.srcElement; //如果點擊的是em/span標簽我們才進行展開收縮操作 if(/^(em|span)$/i.test(tar.tagName)){ var parent = tar.parentNode; //->獲取父親 var oEm = utils.children(parent,"em")[0]; //->獲取父親子集中的第一個em標簽 var firstUl = utils.children(parent,"ul")[0]; //->獲取父親子集中的第一個ul標簽 if(firstUl){ //->只有存在我們才進行相關操作 //->如果這個ul當前是隱藏我們讓其顯示，否則的話讓其隱藏 var isBlock = utils.getCss(firstUl,"display")==="block")?true:false; if(isBlock){ //->當前是顯示的 firstUl.style.displa = "none"; if(oEm){ utils.removeClass(oEm,"open"); } //->當外層的收起，里層所有的ul都要隱藏，并且所有的em都要移除open樣式 var allUl = parent.getElementsByTagName("ul"),allEm = parent.getElementsByTagName("em"); for(var i=0;i<allUl.length;++i){ allUl[i].style.display = "none"; utils.removeClass(allEm[i],"open"); } }else{ //-> 當前隱藏的 firstUl.style.displa = "block"; if(oEm){ utils.addClass(oEm,"open"); } } } } } ``` --- jQ版 ``` var $box = $("#box"); // $("#box>span") $box.find("span").each(function(index,item){ //$(this) -> 每一次循環的時候，當前循環的這個元素 var $pre = $(this).prev(); if($pre[0]&&$pre[0].tagName.toLowerCase()==="em"){ $(this).css("cursor","pointer"); } }); ``` ``` //jQuery中除了bind、unbind、on、off、click、mouseover...這些綁定事件的方式外，還提供了一種 delegate(1.7版本以前用的是live) $box.delegate("em","click",fn); //->給$box綁定點擊事件，如果當前的事件源是em的話，我們執行fn $box.delegate("span","click",fn); function fn(){ var $par = $(this).parent(); var $ul = $($par.children("ul")[0]); var $em = $($par.children("em")[0]); if($ul.length>0){ var isBlock = $ul.css("display")==="block"?true:false; //進來就保存后面有用 $ul.toggle(); $em.toggleClass("open"); //->當前的如果是收縮的話，我們需要把下面子子孫孫中所有ul/em都隱藏和移出open樣式 if(isBlock){ $par.find("ul").css("display","none"); $par.find("em").removeClass("open"); } // if(isBlock){ // $ul.slideUp(); // $em.removeClass("oepn"); // $par.find("ul").css("display","none"); // $par.find("em").removeClass("oepn"); // }else{ // $ul.slideDown(); // $em.addClass("open"); // } } } ```