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);

相关内容

探索 PHP sg15 在...
摘要: 本文探讨了PHP的sg15项目在Web开发中的应用,包括...
2026-02-11 01:23:34
PHP sg15 与数据库...
本文介绍了使用PHP与数据库交互的方法,特别是使用sg15框架或库...
2026-02-10 01:23:38
使用PHP处理YAML数据...
本文介绍了使用PHP处理YAML数据的技巧和策略,包括解析、操作Y...
2026-02-01 01:23:40
常见MySQL视图问题及解...
MySQL视图常见问题包括命名冲突、依赖性管理、性能问题和安全性问...
2026-01-27 01:23:44
MySQL视图在数据库设计...
MySQL视图是虚拟的表,通过定义SQL查询结果呈现。在数据库设计...
2026-01-24 01:23:42
MySQL视图在复杂查询中...
MySQL视图是一种虚拟表,可简化复杂查询、保护数据安全、方便分析...
2026-01-23 01:23:45

热门资讯

object json转化为数... //调用api 程序,通知商户订单异常 20200314 public function callt...
tp5 composer we... 问题: 正常使用中的tp5程序需要安装微信支付v3。 tp5使用cmd面板composer requ...
laravel 对接支付宝当面... 第一步 开发中心网页移动应用下支付接入 第二步 创建应用后需添加可支付的方式 第三步 配置公钥与私钥...
tp5 jquery判断手机端... application--common.php中添加如下代码 //函数作用是判断用户打开的是手机端还...
Laravel 查看SQL操作... 方法一:临时打印操作记录 DB::connection()-enableQueryLog(); # ...
php 打印date函数出现错... 问题描述: 我使用的是phpstudy,在练习时间函数的时候,打印出现在的时间,date(Y-m-d...
Laravel 5.5 .No... 创建了新的laravel项目后, 运行提示:No application encryption ke...
php函数substr_rep... php函数substr_replace从某个位置替换或删除或插入字符串
生成随机字符唯一标识符guid... /** * @param $length * @return string * 生成随机字符串 */...
Laravel 引入自定义类库... 强烈建议引入的类 都是含有命名空间的,这样使用起来就不会出现重名的情况。!!当然,没有命名空间也可以...