对于添加可折叠列表的功能其实大部分都是对模板做些调整，加上一些js脚本就可以了。我们分两步来完成，一是调整模板生成方便我们js操作的html结构，二是书写js脚本，完成功能。废话不多说，马上开干。
一、调整模板:
<dt> <img id="{$cat.id}-images" onclick="changedisplaystate('{$cat.id}-content', '{$cat.id}-images');" src="images/green/minus.gif" alt="" /> <a href="{$cat.url}"> <!--{if $cat.category_img}--> <img src="{$cat.category_img}" alt="{$cat.name|escape:html}" /> <!-- {else } --> {$cat.name|escape:html} <!-- {/if} --> </a></dt>
下面给出模板调整后的代码：
<div id="category_tree" style="background-color:#ffffff;"> <!--{foreach from=$categories item=cat}--><dl style="background-color:#ffffff;"><div id="{$cat.id}-header" style="display:block;float:left;background-color:#ffffff;"><dt style="background-color:#ffffff;"> <img id="{$cat.id}-images" onclick="changedisplaystate('{$cat.id}-content', '{$cat.id}-images');" src="images/green/minus.gif" alt="" /> <a href="{$cat.url}"> <!--{if $cat.category_img}--> <img src="{$cat.category_img}" alt="{$cat.name|escape:html}" /> <!-- {else } --> {$cat.name|escape:html} <!-- {/if} --> </a> </dt></div><div id="{$cat.id}-content" style="background-color:#ffffff;"><dd style="background-color:#fff;"> <!--{foreach from=$cat.cat_id item=child}--><li style="float: left; line-height: 22px; overflow: hidden hidden; padding: 0px 5px; width: 44%;"> <a href="{$child.url}">{$child.name|escape:html}</a></li><!--{/foreach}--> </dd></div></dl> <!--{/foreach}--></div>
二、添加js脚本加入动态控制正如前面的代码所写，在每个折叠的img的onclick都调用”changedisplaystate(’{$cat.id}-content’,'{$cat.id}-images’);” ，下面我们来实现这个函数，这个函数就是根据穿的id-content和id-images来调整他们的属性，比如展开的时候就是把id-content这个div的css style里面的display改成block，这样div就可以显示，然后把id-images的src改成minus的图片，完成整个折叠的过程，下面是代码：
<script type="text/javascript">// 获取指定名字元素function $(d){ return document.getElementById(d);} //改变选择的状态，并且换图片function changedisplaystate(id,imgUrl){ if($(id).style.display =='none') { $(id).style.display = 'block'; $(imgUrl).src = 'images/green/minus.gif'; } else { $(id).style.display = 'none'; $(imgUrl).src = 'images/green/plus.gif'; }}</script>
三、完善全部打开和合并上面的代码完成之后我们可以完成大部分的功能，但是刚开始所有的分类都是展开的，如果客户想全部合上，让客户一个个点击合并是不是用户体验太差了，你可以再这个category里面加上一个按钮改成全部打开或者全部，然后在那个打开和合并的image的onclick里面调用changeAllDisplayState函数，下面给出这个函数的具体代码，他是便利categeory下面所有的div，如果是id—content就改变它的display属性，变成block后者none，然后改变里面所有id-images为minus或者plus图片，完成这些也就完成了整个category的打开和合并了，废话少说，上代码：
//改变所有的状态，并且换图片//parentID为分类的那个层，应该是category，后面的state是要改变成的状态，为none或者blockfunction changeAllDisplayState(parentID,state){ l=$(parentID).getElementsByTagName('div'); c=[]; for(i=0;i<l.length;i++){ h=l[i].id; if(h.substr(h.indexOf('-')+1,h.length)=='content') { l[i].style.display = state; categoryID = h.substr(0,h.indexOf('-')-1); imageID = categoryID+"-images"; if(state == 'none') { $(imageID).src = 'images/green/minus.gif'; } else { $(imgUrl).src = 'images/green/plus.gif'; } } }}
四、下载为了节省大家的时间，我把我修改好的lbi文件上传大家下载，地址是：点击此处下载分类修改后的ecshoplbi文件五、总结这次完成了对分类列表的修改，下面一篇文章我准备在首页显示新闻的地方改成滚动显示当前的销售情况，就是现实who购买what，当前的状态时什么。感觉这个功能能让用户感觉更加的动感，可以动态的了解你这个网站卖了多少好东西了。
有事者，事竟成;破釜沉舟，百二秦关终归楚;苦心人，
