ecshop二次开发：添加可折叠的分类列表
对于添加可折叠列表的功能其实大部分都是对模板做些调整，加上一些js脚本就可以了。我们分两步来完成，一是调整模板生成方便我们js操作的html结构，二是书写js脚本，完成功能。废话不多说，马上开干。
一、调整模板:
接上篇一样，我们这次要调整的还是category_tree.lbi文件，以前生成的分类是放到<dl>里面，部分div的概念，我们用js对<dl><dd>这些标签的操作没有用<div>来的方便，所以我们书写下面代码，把我们一级分类做成一个”id-header”的div，把分类下的二级分类放到一个”id-centent”下的div里面。这样调整后我们就可以通过js动态的改变二级分类div的现实不显示来完成菜单的折叠功能了。当然在改变之前我们要给分类前面加入一个img来显示折叠的+和-号，代码如下：
<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或者block
function 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，当前的状态时什么。感觉这个功能能让用户感觉更加的动感，可以动态的了解你这个网站卖了多少好东西了。 
