ecshop添加可折叠的分类列表
对于添加可折叠列表的功能其实大部分都是对模板做些调整,加上一些js脚本就可以了。我们分两步来完成,一是调整模板生成方便我们js操作的html结构,二是书写js脚本,完成功能。废话不多说,马上开干。一、调整模板:接上篇一样,我们这次要调整的还是category_tree.lbi文件,以前生成的分类是放到
- 里面,部分div的概念,我们用js对
- 这些标签的操作没有用来的方便,所以我们书写下面代码,把我们一级分类做成一个”id-header”的div,把分类下的二级分类放到一个”id-centent”下的div里面。这样调整后我们就可以通过js动态的改变二级分类div的现实不显示来完成菜单的折叠功能了。当然在改变之前我们要给分类前面加入一个img来显示折叠的+和-号,代码如下:
{$cat.name|escape:html}
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'; } } }}[/i][/i]