tp5 volist三级分类循环
未知
2020-12-13 23:18:54
0
问题描述:
   网站用的框架是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);

相关内容

MySQL变量类型与用途
MySQL支持多种数据类型,包括数值、字符串、日期和时间等类型,以...
2024-11-20 20:23:37
MySQL变量的作用域与访...
摘要: MySQL变量具有作用域和访问控制,局部变量限于特定上下...
2024-11-20 20:00:40
MySQL变量定义与初始化
MySQL变量分为系统变量和用户定义变量,用于存储数据和配置参数。...
2024-11-20 19:00:42
如何使用MySQL变量进行...
本文详细介绍了MySQL中用户定义变量、系统变量和局部变量的使用方...
2024-11-20 18:46:45
动态分配MySQL变量的示...
MySQL中,变量用于存储临时数据,包括全局和会话变量以及用户定义...
2024-11-20 18:23:38
云服务器上Kubernet...
本文介绍了在云服务器上搭建Kubernetes集群的实战过程,包括...
2024-11-20 17:00:41

热门资讯

tp5 jquery判断手机端... application--common.php中添加如下代码 //函数作用是判断用户打开的是手机端还...
Laravel 5.5 .No... 创建了新的laravel项目后, 运行提示:No application encryption ke...
php 打印date函数出现错... 问题描述: 我使用的是phpstudy,在练习时间函数的时候,打印出现在的时间,date(Y-m-d...
生成随机字符唯一标识符guid... /** * @param $length * @return string * 生成随机字符串 */...
layui缩略图 div class=layui-form-item label class=layui-form-l...
php函数substr_rep... php函数substr_replace从某个位置替换或删除或插入字符串
Laravel 引入自定义类库... 强烈建议引入的类 都是含有命名空间的,这样使用起来就不会出现重名的情况。!!当然,没有命名空间也可以...
object json转化为数... //调用api 程序,通知商户订单异常 20200314 public function callt...
Laravel 查看SQL操作... 方法一:临时打印操作记录 DB::connection()-enableQueryLog(); # ...
php银行开放平台接口:pfx... 问题描述: 对接易通银行,他们的服务开放平台是java开发,而我的是php,现在需要php版本的SD...