ecshop 仿京东产品树效果（非插件）

ecshop仿京东产品树

<div class=”fl” id=”allcat”><a href=”javascript:void(0)”? class=”allcat”>臻和商城</a>
<div id=”categoryboxtop” style=”display:none”>
<ul id=”sidebar”>
<!–{foreach from=$categories item=cat}–>
<li class=”sidelist”>
<h3><a href=”{$cat.url}”>{$cat.name|escape:html}</a></h3>
<!–{if $cat.cat_id}–>
<div class=”i-list” id=”i-list-{$cat.id}”>

<!–{foreach name=childs from=$cat.cat_id item=child}–>
<dl>
<dt><a href=”{$child.url}” title=”{$child.name|escape:html}” class=”txtdot”>{$child.name|escape:html}</a></dt>
<!–{if $child.cat_id}–>
<!–{foreach name=childson from=$child.cat_id item=childson}–>
<dd><a href=”{$childson.url}” title=”{$childson.name|escape:html}” class=”txtdot”>{$childson.name|escape:html}</a></dd>
<!–{/foreach}–>
<!–{/if}–>
</dl>
<!–{/foreach}–>

</div>
<!–{/if}–>
</li>

<!–{/foreach}–>
</ul>

<script type=”text/javascript”>
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
document.getElementById(“allcat”).onmouseover=function(e){
document.getElementById(“categoryboxtop”).style.display=”block”;
}
var topobj=document.getElementById(“sidebar”).getElementsByTagName(“li”);
var len=topobj.length;
for(var i=0;i<len;i++){
topobj[i].onmouseover=function(e){
this.getElementsByTagName(“h3″)[0].className=”hover”;
this.getElementsByTagName(“div”)[0].style.display=”block”;
//stopPropagation(e);

}
topobj[i].onmouseout=function(e){
this.getElementsByTagName(“h3″)[0].className=”ahover”;
this.getElementsByTagName(“div”)[0].style.display=”none”;
document.getElementById(“categoryboxtop”).style.display=”none”;
stopPropagation(e);
}

}

document.getElementById(“allcat”).onmouseout=function(e){

document.getElementById(“categoryboxtop”).style.display=”none”;
stopPropagation(e);
}
</script>

</div>

</div>

这里面有一个问题那就是JS事件的冒泡，为了不修改官方源文件，以保持可能随官方升级，这里没有使用jquery。