项目需求如下,遍历三级商品分类树,二级和三级同属一个DIV,商品分类树尼玛老生常谈的问题了,于是在category_tree.lbi实现代码如下:
<span style="font-family:Microsoft YaHei;font-size:14px;"><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.my_left_category2{display:block; float:left; width:196px; font-size:12px; height:144px; _height:148px; padding-top:0px; border:2px #676767 solid; border-top:none;}
.my_left_category2 dt{height:33px; line-height:33px; background:url(images/category_bg.jpg) no-repeat; border-bottom:#CCC 1px solid; margin:0 5px 0 5px;}
.my_left_category2 dt .a1{font-size:14px; width:135px; margin-left:2px; padding-left:23px; display:block;height:30px;line-height:30px;float:left; font-weight:bolder ; color:#333333;}
.my_left_category2 .category_over .a1{font-size:14px; font-weight:bold; color:#333; border:1px solid #4b941e; border-right:none;}
.my_left_category2 .category_over .a1:hover{color:#1b578a}
.category_over_box{display:none; margin-top:20px; _margin-top:0px; *margin-top:0px; margin-top:0px9;}
.category_over_box .f_l{width:53px; text-align: right; padding-right:7px; float:left; font-weight:bold; color:#cc0000}
.category_over_box .f_l a{padding:0 6px; white-space:nowrap; color:#cc0000}
.category_over_box .f_r{width:420px; float:left; text-align:left; line-height:18px; color:#CCCCCC}
.category_over_box .f_r b{font-weight:normal; height:18px; line-height:18px; float:left;}
.category_over .category_over_box{display:block; background:#FFF ; border:1px solid #4b941e; width:506px; position:absolute; margin-left:160px; *margin-left:-4px; _margin-left:-4px; margin-top:0px; z-index:998}
.category_over_box ul{padding:0 10px;}
.category_over_box ul li{border-bottom:1px solid #ffefdd7; line-height:21px; height:auto; padding:6px 0}
.dang{display:none; margin-top:1px; margin-left:-2px;}
.category_over .dang{display:block}
-->
</style>
<div style="width:200px; float:left; padding-bottom:10px;">
<div class="module" style=" padding:0px; margin:0px;">
<div class="caption" style="background:url(images/category_title_bg.jpg) no-repeat; width:200px; height:38px; line-height:36px; overflow:hidden; float:left">
<font style="float:left; color:#FFF;">商品分类</font>
</div>
<div class="my_left_category2">
<!--{foreach from=$categories item=cat}-->
<dt οnmοuseοver="this.className='category_over'" οnmοuseοut="this.className=''" class="">
<a class="a1" href="{$cat.url}">{$cat.name|escape:html}</a>
<div class="category_over_box">
<ul class="clearfix">
<!--{foreach from=$cat.cat_id item=child}-->
<li>
<div style="clear:both"></div>
<div class="f_l"> <a class="over_2" href="{$child.url}">{$child.name|escape:html}</a></div>
<div class="f_r"><!--{foreach from=$child.cat_id item=childer}-->
<b> | <a class="over_3" href="{$childer.url}">{$childer.name|escape:html}</a> </b>
<!--{/foreach}-->
</div>
<div style="clear:both"></div>
</li>
<!--{/foreach}-->
</ul>
</div>
<img class="dang" style="position: relative; float:left" src="images/dang.gif">
</dt>
<!--{/foreach}-->
</div>
</div>
</div></span>