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

相关内容

XXX技术解析
本文详细解析了XXX技术的定义、特点、应用及发展趋势。该技术具有高...
2025-02-13 01:23:39
XXX书籍介绍
《XXX书籍》介绍:深度探讨主题,内容丰富多样,独特视角与实例丰富...
2025-02-10 08:46:40
小米汽车:经查完全不存在网...
小米汽车回应SU7“断轴”传闻,经查完全不存在。官方迅速澄清,强调...
2025-02-10 06:23:39
国家医保局回应“刷医保买华...
国家医保局回应刷医保买华为手表现象,强调医保资金专款专用,呼吁民众...
2025-02-10 01:23:36
浙江宁波喊停“刷医保购买华...
浙江宁波暂停使用医保卡购买华为WATCH D2智能手表,规范医保资...
2025-02-09 22:00:58
高级Web应用防火墙:提升...
高级Web应用防火墙(WAF)是保护Web应用的关键技术,通过深度...
2025-02-09 20:23:41

热门资讯

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