ECShop H5微商城
ECShop APP商城
ECshop4.0商业授权
ECShop源码全能套餐
ECMall全能套餐(含主机)
ECMall3.0功能定制
ECShop商城小程序
ECShop二开定制
ECShop授权套餐
ECShop装修市场
ECMall基础套餐(PC+H5)
ECMall3.0商业授权
返回列表 发帖

[共享] 列表页分类树当前栏目id的分类展开教程

网上找不到的东西,有用到的可以拿去但是还出现一个问题,在3J列表只出现当前栏目的平行分类
未命名.jpg
2013-11-4 13:18

这是3J列表的情况,请教高手如何也显示上面图片的样式
未命名2.jpg
2013-11-4 13:18


教程开始:
category.lib里我引用的是categorytree.lib
修改categorytree.lib
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  2. <script language="javascript">
  3. function expandIt(divId){
  4.         var objDiv = document.getElementById(divId);
  5. var spobjDiv=document.getElementById("sp"+divId);
  6.         if (objDiv.style.display=="none"){
  7.                 spobjDiv.src='/images/menu_minus.gif';
  8.                 objDiv.style.display="";
  9.         }else{
  10.                 spobjDiv.src='/images/menu_plus.gif';
  11.                 objDiv.style.display="none";
  12.         }}
  13. </script>
  14. <style>
  15. .content h1{color:#fff; background-color:#919191; font-size:16px; height:40px; line-height:40px; text-indent:10px;}
  16. dt.item_p{width:238px; height:35px; line-height:35px; text-indent:30px; border-bottom:1px #ccc solid; font-size:13px;}
  17. dt.item_p:hover{background-color:#eee;}
  18. dt img{float:right; padding:10px 10px 0 0;}
  19. dt#ico16{background:url(images/treeico.jpg) no-repeat; background-position:0px 0px;}
  20. dt#ico16:hover{background:url(images/treeico2.jpg) no-repeat; background-position:0px 0px; background-color:#eee;}

  21. dt#ico17{background:url(images/treeico.jpg) no-repeat; background-position:0px -36px;}
  22. dt#ico17:hover{background:url(images/treeico2.jpg) no-repeat; background-position:0px -36px; background-color:#eee;}

  23. dt#ico18{background:url(images/treeico.jpg) no-repeat; background-position:0px -72px;}
  24. dt#ico18:hover{background:url(images/treeico2.jpg) no-repeat; background-position:0px -72px; background-color:#eee;}

  25. dt#ico81{background:url(images/treeico.jpg) no-repeat; background-position:0px -108px;}
  26. dt#ico81:hover{background:url(images/treeico2.jpg) no-repeat; background-position:0px -108px; background-color:#eee;}

  27. dt#ico93{background:url(images/treeico.jpg) no-repeat; background-position:0px -144px;}
  28. dt#ico93:hover{background:url(images/treeico2.jpg) no-repeat; background-position:0px -144px; background-color:#eee;}

  29. dt#ico133{background:url(images/treeico.jpg) no-repeat; background-position:0px -180px;}
  30. dt#ico133:hover{background:url(images/treeico2.jpg) no-repeat; background-position:0px -180px; background-color:#eee;}

  31. dt.item_p a{ color:#000;}

  32. .content dl dd{font-size:12px; text-indent:45px; background-color:#f4f4f4;}
  33. .content dl dd p{height:28px; line-height:28px; border-bottom:1px #ccc dashed; width:230px; margin:0 auto;}
  34. .content dl dd a{color:#000;}
  35. .content dl dd a:hover{background-color:#ed145b; padding:3px; color:#fff;}
  36. span.dian{padding-right:8px;}
  37. </style>
  38. <div class="area" id="category_tree">
  39. <div class="top"><span></span></div>
  40. <div class="content">
  41.     <h1>所有分类</h1>
  42.     <dl>
  43.       <!--{foreach from=$categories item=cat}-->
  44.       <dt class="item_p" id="ico{$cat.id}">{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>      
  45.         <dd id="cattree{$cat.id}" <a href="{$cat.url}" {if $cat.id eq $category}style="display:block"{else}style="display:none"{/if}>
  46. <!--{foreach from=$cat.cat_id item=child}-->
  47.         {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}<span class="dian">·</span><a href="{$child.url}" onfocus="this.blur()">{$child.name|escape:html}</a></p>

  48.         <!--{/foreach}-->
  49. </dd>
  50.       <!--{/foreach}-->
  51.     </dl>
  52. </div>
  53. <div class="bottom"><span></span></div>
  54. </div>
复制代码






  1. <dd id="cattree{$cat.id}" <a href="{$cat.url}" {if $cat.id eq $category}style="display:block"{else}style="display:none"{/if}>
复制代码




意思是如果是当前栏目id{if $cat.id eq $category}那么style样式display:block,否则display:none
因为display:block是展开,display:none是关闭
ECShop下载                             ECShop4.0商业授权

上面的css是搭配聚美优品模板用的,其他模板根据自己的需要更改css
ECShop下载                             ECShop4.0商业授权

TOP

不用回答了,应该实现不了,根据栏目id判断的,3J列表里的话就要根据childid判断,一个文件里我估计够呛

TOP

一楼的代码3级列表分类是当前栏目的平行分类,如果想调用出来全部的分类,把<!--{foreach from=$categories item=cat}-->替换成<!--{foreach from=get_categories_tree(0) item=cat name=cat0}-->
ECShop下载                             ECShop4.0商业授权

TOP

返回列表