可自由收缩或展开的产品分类树（支持四级分类）

1、下面代码是在ecshop2.7(utf-8)，blueocean模板下实现的，没有使用这个模板的朋友可根据自己使用的模板对照着修改下即可，基本原理大致相同
2、在IE6,IE7,FIREFOX下测试通过，而且支持四级分类，

3、方法：将library/category_tree.lbi 替换为下面代码即可

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript">
function expandIt(divId){
        var objDiv = document.getElementById(divId);
var spobjDiv=document.getElementById("sp"+divId);
        if (objDiv.style.display=="none"){
                spobjDiv.src='/images/menu_minus.gif';
                objDiv.style.display="";
        }else{
                spobjDiv.src='/images/menu_plus.gif';
                objDiv.style.display="none";
        }}
</script>
<div class="area" id="category_tree">
  <div class="top"><span></span></div>
  <div class="content">
    <h1>Categories</h1>
    <dl>
      <!--{foreach from=$categories item=cat}-->
      <dt>{if $cat.cat_id}<img src="/images/menu_minus.gif" id="spcattree{$cat.id}" onClick="expandIt('cattree{$cat.id}');" border=0>{/if}<a href="{$cat.url}">{$cat.name|escape:html}</a></dt>     
        <dd id="cattree{$cat.id}" style="display:block">
<!--{foreach from=$cat.cat_id item=child}-->
        {if $child.cat_id}<p><img src="/images/menu_minus.gif"  id="spcattree{$child.id}" onClick="expandIt('cattree{$child.id}');" border=0>{else}<p>{/if}<a href="{$child.url}" onfocus="this.blur()">{$child.name|escape:html}</a></p>
  <ul id="cattree{$child.id}" >
  <!--{foreach from=$child.cat_id item=childe}-->
  <li>&nbsp;&nbsp;&nbsp;&nbsp;{if $childe.cat_id}<img src="/images/menu_minus.gif"  id="spcattree{$childe.id}" onClick="expandIt('cattree{$childe.id}');" border=0>{/if}<a href="{$childe.url}" onfocus="this.blur()">{$childe.name|escape:html}</a></li>
   {if $childe.cat_id}<li id="cattree{$childe.id}">
   <!--{foreach from=$childe.cat_id item=childer}-->
   <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{$childer.url}" onfocus="this.blur()">{$childer.name|escape:html}</a></p> 
   <!--{/foreach}-->
   </li>{/if}
  <!--{/foreach}-->
  </ul>
        <!--{/foreach}-->
</dd>
      <!--{/foreach}-->
    </dl>
  </div>
  <div class="bottom"><span></span></div> 
</div>

下面是需要用到两个小图标