💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
嵌套,循环栏目,并列出子栏目下的内容。 ![](https://box.kancloud.cn/10264c68de0a6e8031b3805e46dbbe61_1151x346.png) 代码如下: ~~~ <div class="channel-list"> <div class="row"> <!-- S 栏目列表 --> {volist name=":fun('sort@top','cms')" id="name"} {volist name=":fun('sort@son',$key,'cms')" id="vo" } <div class="col-xs-12 col-sm-6"> <h3><a href="{:url('cms/content/index',['id'=>$key])}">{$vo}</a> <em><a href="{:url('cms/content/index',['id'=>$key])}">更多</a></em></h3> <div class="media" data-id="{$key}"> <!--这里进行关联--> </div> <ul class="list-unstyled inner-list" data-id="{$key}"> <!--这里进行关联--> </ul> </div> {/volist} {/volist} <div style="display:none;"> <!--这里进行隐藏然后JQ进行赋值--> {qb:tag name="mb_index_qiantao_tuijian" type="cms" union="fid" rows="1" js="mb_index_qiantao_tuijian"} <div class="media-left"> <a href="{$rs.url}"> <div class="embed-responsive embed-responsive-4by3 img-zoom"> <img class="embed-responsive-item media-object" width="64" height="64" src="{$rs.picurl?:'__STATIC__/cqap/cms/images/nopic.png'}"> </div> </a> </div> <div class="media-body"> <h4 class="media-heading"><a href="{$rs.url}">{$rs.title|get_word=50}</a></h4> <p>{$rs.content|get_word=105}</p> </div> {/qb:tag} </div> <div style="display:none;"> <!--这里进行隐藏然后JQ进行赋值--> {qb:tag name="mb_index_qiantao_zuixin" type="cms" union="fid" rows="8" js="mb_index_qiantao_zuixin"} <li> <a href="{$rs.url}">{$rs.title|get_word=55}</a> <span class="pull-right">{:date("m-d",$rs.create_time)}</span> </li> {/qb:tag} </div> <script type="text/javascript"> $(".media").each(function(){ var that = $(this); var fid = $(this).data('id'); var page = 1; var url = "{qb:url name='mb_index_qiantao_tuijian'}" + page + "&fid=" + fid; $.get(url,function(res){ if(res.code==0){ if(res.data!=''){ that.html(res.data); } } }); }); $(".list-unstyled").each(function(){ var that = $(this); var fid = $(this).data('id'); var page = 1; var url = "{qb:url name='mb_index_qiantao_zuixin'}" + page + "&fid=" + fid; $.get(url,function(res){ if(res.code==0){ if(res.data!=''){ that.html(res.data); } } }); }); </script> <!-- E 栏目列表 --> </div> </div> ~~~