tp5 volist三级分类循环

发布时间:2020-12-13作者:小灵龙点击:80

问题描述:
   网站用的框架是thinkcmf,在前端页面,展示栏目中有三级分类,如图所示:

thinkphp

解决办法:
html代码如下,具体样式自己调试一下。
                  
<style>
.menu .deyuan .deyuanclick .twoul li a{
        font-size: 14px;
        display: inline-block;
        width: 200px;
    }
    .menu .deyuan .deyuanclick .twoul li:hover{
        font-size: 15px;
        background: #5e9edb;
    }
    .menu .deyuan .deyuanclick .twoul li{
        width: 377px;

    }
    .menu .deyuan .deyuanclick .twoul{
        transform: translateZ(0);
        display: none;
        position: absolute;
        left: 200px;
        top: 0px;
        padding: 0px;
        height: 455px;
        border: 1px solid #D0B0A6;
        box-shadow: 2px 2px 0 #dcdadb;
        background-color: #FFF;
        color: #333;
        font-size: 12px;
        z-index: 22;
    }
    
    .menu .deyuan .deyuanclick .twoul .hideul li{
        width: 175px;

    }
    .menu .deyuan .deyuanclick .twoul .hideul li a{
        font-size: 14px;
        display: inline-block;
        width: 175px;
    }
    .menu .deyuan .deyuanclick .twoul .hideul{
        transform: translateZ(0);
        display: none;
        position: absolute;
        left: 200px;
        top: 0px;
        padding: 0px;
        height: 455px;
        border: 1px solid #D0B0A6;
        box-shadow: 2px 2px 0 #dcdadb;
        background-color: #FFF;
        color: #333;
        font-size: 12px;
        z-index: 22;
    }
</style>
           <ul class="firstul">
     <volist name="goods_menu" id="item">
      <li class="item{$item.type_id}">
        <a href="#">{$item.type_name}</a>
          <span>
             <img src="__WEB_ROOT__/jly/images/triangle.png">
             </span>
            <ul class="twoul">
             <volist name="item['child']" id="erji">
               <if condition="$erji['grandson'] neq ''">
                 <li>
                  <a href="#">{$erji.type_name}</a>
                 <ul class="hideul">
                   <volist name="erji['grandson']" id="sanji">
                
                        <a href="#">{$sanji.type_name}</a>
                      </li>
                   </volist>
                   </ul>
                </li>
               </if>                          

             </volist>
            </ul>
          </li>
         </volist>

        </ul>

<script type="text/javascript">
     $(function(){
        //对元素进行隐藏
        $('.twoul li').last().css('border','none');
        //鼠标移入和移出事件
        $('.firstul li').hover(function(){
            $(this).find('.twoul,.childcolumn').show();
            //鼠标移入和移出事件
            $('.twoul li').hover(function(){
                $(this).find('.hideul').show();
            },function(){
                $(this).find('.hideul').hide();
            });
        },function(){
            $(this).find('.twoul').hide();
        });
      })    

</script>
php代码循环foreach,循环出三维数组。
 //分类
        $goods_menu = Db::name('goods')->where(['parent_id'=>0])->select()->toArray();

        foreach ($goods_menu as $k=>$value) {

            $erjimenu = Db::name('goods')->where(['parent_id'=>$value['type_id']])->select()->toArray();

            $goods_menu[$k]['child']=$erjimenu;

            foreach ($goods_menu[$k]['child'] as $key=> $val) {

                $sanjimenu = Db::name('goods')->where(['parent_id'=>$val['type_id']])->select()->toArray();

                $goods_menu[$k]['child'][$key]['grandson']=$sanjimenu;
            }
        }

        // dump($goods_menu);

标签: