域名空间 旧版主页 免费下载 教程中心
官方动态 功能建议 插件模块 风格模板 问题反馈 技术交流 站长杂谈 代码共享 V系列产品 运营交流
社区主页　 草根站长圈　 问题反馈
分享
  • 收藏
  • 举报
    X
    【已解决】50积分悬赏一个栏目循环问题
    • snscn 消费1862.35元 2019-01-31 23:22 23:22
    1019
    33

    穷人，目前就只有50积分了，别嫌少哈。

    	{volist name=":sort_config('bbs',0)" val="listdb" id="name"}
        <div class="bbslists">
          <div class="bbslists_gid">
            <ul>{volist name="listdb" id="name"}
              <li><a href="javascript:;">{$name}</a></li>
              {/volist}
            </ul>
          </div>
          <div class="bbslists_fid">
            <ul>
			{volist name=":sort_config('bbs',$key)" id="name"}
              <li><a href="{:url('bbs/content/index',['id'=>$key])}"><em>{$name}</em></a> </li>
            {/volist}
            </ul>
          </div>
        </div>
	{/volist}

    上面这段代码效果就是下图这种。

    左边栏目为一级栏目，右边为二级栏目

    TAB效果，我要实现的功能是，循环出一级栏目和二级栏目。一级栏目在左边，二级栏目在右边。点击左边一级栏目，右边就切换出它下面对应的二级栏目。

    困扰我的地方在于，一级栏目像二级栏目那样，要循环一次。{volist name="listdb" id="name"}{/volist}又调不出来一级栏目。

    看了教程和一些示例，有点郁闷的是，要么我调出左边一级栏目，调不出右边二级栏目；要么就是调出右边二级栏目，调不出左边一级栏目。

    这种效果不知道咋调用，用官方分屏教程那种办法，{volist name=":array_chunk(sort_config('fenlei',0),8,true)" id="ars"}{/volist}却不知道二级栏目怎么调用。

    懂的大神麻烦解答下，谢谢！


    搞定了，代码现在贴出来，希望对其他人也有用，最后，感谢torylf大神的热心帮助！

    <div class="bbslists bg_f cl">
<div class="bbslists_gid bg_e cl">
  <ul>
    {volist name=":sort_config('bbs',0)" id="name"}
    <li class="fxpostlistkey {if $i==1}bg_f{/if} b_b fxpostlist_{$key}" fid="{$key}"><span class="bg_0"></span><a href="javascript:;">{$name}</a></li>
    {/volist}
  </ul>
</div>
<div class="bbslists_fid cl">
{volist name=":sort_config('bbs',0)" id="one" }
  {if $i==1}<ul class="fxpostlistbox_{$key}">{else /}<ul class="fxpostlistbox_{$key}" style="display:none">{/if}
  {volist name=":sort_config('bbs',$key)" id="twosort"}
  <li class="b_b"> <i class="webfonts icon-you f_e y"></i> <a href="{:urls('content/index',"fid=$key")}" class="bbslist_ico"><img class="noloadimage" src="__STATIC__/cqap/app/images/ico/fwzs.png" alt="{$twosort}" /> </a> <a href="{:url('bbs/content/index',['id'=>$key])}" class="post_tit"><em>{$twosort}</em></a> </li>
  {/volist}
</ul>
{/volist}
</div>
</div>


    7
    赏礼
    赏钱
    收藏
    点击回复
        全部留言
    • 共 33 条
    • fkenuiabcd 风格开发者 消费:55.05元 2019-02-10 09:59 09:596楼

    0 赏钱 赏礼回复
    • Emilia 实战运营者 消费:3.06元 2019-02-09 23:51 23:516楼

      那么三级栏目怎么调呢

    0 赏钱 赏礼回复
    • snscn 普通粉丝 消费:1862.35元 2019-02-03 14:32 14:326楼

      删除了，晕死。

      	{volist name=":sort_config('bbs',0)" val="listdb" id="name"}
        <div class="bbslists">
          <div class="bbslists_gid">
            <ul>{volist name="listdb" id="name"}
              <li><a href="javascript:;">{$name}</a></li>
              {/volist}
            </ul>
          </div>
          <div class="bbslists_fid">
            <ul>
			{volist name=":sort_config('bbs',$key)" id="name"}
              <li><a href="{:url('bbs/content/index',['id'=>$key])}"><em>{$name}</em></a> </li>
            {/volist}
            </ul>
          </div>
        </div>
	{/volist}

      难点是

                <div class="bbslists_gid">
            <ul>{volist name="listdb" id="name"}
              <li><a href="javascript:;">{$name}</a></li>
              {/volist}
            </ul>
          </div>

      需要单独循环。

      上面代码最外围容器是：<div class="bbslists"></、div>


      一级栏目：<div class="bbslists_gid"><ul> <li>{$name}</、li></、ul></、div>
      单独循环


      二级栏目：<div class="bbslists_fid"><ul> <li>{$name}</、li></、ul></、div>

      也是单独循环


      一级栏目和二级栏目算是并列循环关系，不是常见的嵌套循环。

      阿赖耶识 消费:24.43元 2019-02-03 14:34
      这又啥区别呢，或者说，你要的具体效果上是什么样子的
      snscn 消费:1862.35元 2019-02-03 14:34
      @torylf 刚刚你发的没看见，这个页面代码下变形，我删错了，怎么你的回复也能删除？
      阿赖耶识 消费:24.43元 2019-02-03 14:35
      你要的效果，不是左边一级栏目，点击以后，右边出现左边对应的二级栏目吗
      snscn 消费:1862.35元 2019-02-03 14:36
      仿的站，要改动的话太大了，所以还是想原汁原味用哪个代码。
      只能老老实实循环一级栏目
      snscn 消费:1862.35元 2019-02-03 14:37
      是的 ，但是 仿的这个站，有很多js效果，只能这样做
      阿赖耶识 消费:24.43元 2019-02-03 14:39
      你是说，一级栏目的循环，和二级栏目的循环，都单独剥离出来独立的循环是吧
      不受嵌套的影响
      snscn 消费:1862.35元 2019-02-03 14:40
      @torylf 是的，单独循环，算并列循环关系，不是嵌套循环。
      阿赖耶识 消费:24.43元 2019-02-03 14:42
      这样的话，volist里没法传值呀，官方提供的函数里都必须有一个fid的值，你二级循环要独立出来，怎么知道一级的父类fid呢
      snscn 消费:1862.35元 2019-02-03 14:44
      就是啊，晓不得啷个搞，这两天还到处查TP教程和示例，都是嵌套循环，没这种单独的循环。
      阿赖耶识 消费:24.43元 2019-02-03 14:47
      没有什么搞不定的，慢慢想，我想到办法时再发你吧，你想到办法也可以分享出来，先过年
      snscn 消费:1862.35元 2019-02-03 14:48
      好的，不急，真是麻烦你了。新年快乐！
      阿赖耶识 消费:24.43元 2019-02-03 16:39

      想了想，其实你这个也很简单，在二级菜单上再套一层一循环，不做任何输出，只是利用循环的$key变量找到二级循环不就可以了吗，这样的嵌套不影响你的并列输出吧，看代码：

      <div class="tabtest">
   <style type="text/css">
      .tabtest{position:relative;}
      .tabtest ul li{list-style:none;padding:10px;width:150px;height:50px;border-bottom:1px solid #FFF;
      background-color:grey;color:#FFF;line-height:30px;font-size:16px;cursor:pointer;}
      .tabtest ul li:hover{background-color:#E8E8E8;color:#000;}
      .twotabs{width:280px;position:absolute;top:0;left:190px;display:none;background-color:grey;
      color:#fff;}
      .twotabs ul li{background-color:grey;border-bottom:1px solid gray;}
   </style>
   <ul>
{volist name=":sort_config('blog',0)"  id="onesort"}

         <li id="{$key}" onclick="tw({$key})" >{$onesort}</li>

{/volist}
   </ul>
   
   
//这里和一级栏目分开了，只是再次加一个一级的循环，利用ket变量传递而已   
   {volist name=":sort_config('blog',0)" id="one" }
   <div class="twotabs" id="t{$key}"  >
      <ul>
         {volist name=":fun('sort@son',$key,'blog')"  id="twosort"}
         <li>{$twosort}</li>
         {/volist}
      </ul>
   </div>
   {/volist}
   <script type="text/javascript">


      function tw(k){
               event.stopPropagation()
         if($('#t'+ k).is(":hidden")){
                   $('#t'+ k).show();
         }else{
                   $('#t'+ k).hide();
         }
               $("body").click(function(){
                   $('.twotabs').hide();
               })

           }
   </script>

</div>


      snscn 消费:1862.35元 其他手机 2019-02-03 16:58
      大神谢谢了，大过年的还帮我解决问题，晚点我回去试试。万分感谢！
      snscn 消费:1862.35元 2019-02-03 20:12
      @torylf 搞定了，谢谢大神了，脑壳没转过弯，一直给一级栏目套两层循环，就没想过给二级栏目套层循环。

      代码贴在上面了，希望对其他人有用。
    0 赏钱 赏礼回复
    创业多艰
    CQAP.COM
    • 阿赖耶识 程序开发者 消费:24.43元 2019-02-01 10:08 10:086楼

      http://x1.alaiyeshi.net/blog/list-22.html  

      看下是不是你需要的，自己对应这改就好


      <div class="tabtest">
   <style type="text/css">
      .tabtest{position:relative;}
      .tabtest ul li{list-style:none;padding:10px;width:150px;height:50px;border-bottom:1px solid #FFF;
      background-color:grey;color:#FFF;line-height:30px;font-size:16px;cursor:pointer;}
      .tabtest ul li:hover{background-color:#E8E8E8;color:#000;}
      .twotabs{width:280px;position:absolute;top:0;left:190px;display:none;background-color:grey;
      color:#fff;}
      .twotabs ul li{background-color:grey;border-bottom:1px solid gray;}
   </style>
   <ul>
{volist name=":sort_config('blog',0)"  id="onesort"}

         <li id="{$key}" onclick="tw({$key})">{$onesort}</li>
      <div class="twotabs" id="t{$key}">
         <ul>
            {volist name=":fun('sort@son',$key,'blog')"  id="twosort"}
            <li>{$twosort}</li>
            {/volist}
         </ul>
      </div>
{/volist}
   </ul>

   <script type="text/javascript">

      function tw(k){
               event.stopPropagation()
               $('#t'+ k).siblings('.twotabs').hide();
         if($('#t'+ k).is(":hidden")){
                   $('#t'+ k).show();
         }else{
                   $('#t'+ k).hide();
         }
               $("body").click(function(){
                   $('.twotabs').hide();
               })

           }
   </script>
</div>


      snscn 消费:1862.35元 其他手机 2019-02-01 10:09
      对的，就是这种，晚点我回去按你这做
      snscn 消费:1862.35元 其他手机 2019-02-01 10:10
      看来只能用js配合css调用。
      阿赖耶识 消费:24.43元 2019-02-01 10:37
      必须的，不然点击和滑动的事件行为没法处理
      黄老邪-1731 消费:5798.24元 2019-02-01 13:05
      标签是在服务器运行的，JS是在客户端，也就是浏览器上运行的，这也相当于一个联运下拉菜单一样，要与用户交互，故一定要用JS才能实现。理论我懂，但不会写代码。，复制修改下还行
      黄老邪-1731 消费:5798.24元 2019-02-01 13:11
      CSS只是控制显示模式，而JS才能与用户互动，当鼠标移动到某个栏目上，或是点击某个栏目时，都可通过JS引发一个事件，这个事件要在JS中定义
      snscn 消费:1862.35元 其他手机 2019-02-01 13:14
      以前用其他cms，我都是用标签循环。习惯了，有空了，研究下X1的异步加载。
    0 赏钱 赏礼回复
    与天地合其德,与日月合其明,与四时合其序,与鬼神合其吉凶
    • 素之美 风格开发者 消费:495.25元 2019-02-01 00:23 00:236楼

      如黄药师所说，这个是要css和js配合使用的，代码就是下面的代码

      {volist name=":sort_config('频道目录名称',0为所有，或者指定某个分类，输入分类Fid调用分类下面的栏目)" id="name"}
	<a href="{:urls('content/index',"fid=$key")}">{$name}</a><br>
    {volist name=":sort_config('频道目录名称',$key)" id="name"}
    	|--<a href="{:urls('content/index',"fid=$key")}">{$name}</a><br>
    {/volist}
{/volist}


      snscn 消费:1862.35元 其他手机 2019-02-01 09:06
      谢谢大神，代码有点多，看看标签能直接循环出来不，
    0 赏钱 赏礼回复
    ↪ ~\(^o^)/~ 齐人心博天下，齐博X1再创辉煌。
    • 码农 程序开发者 消费:0元 2019-02-01 09:03 09:036楼

      必须要CSS 跟 JS 配合起来才行的。

      snscn 消费:1862.35元 其他手机 2019-02-01 09:05
      有考虑过，就是这段代码多了，就放弃了，看看直接标签能循环不。
    0 赏钱 赏礼回复
    • 阿赖耶识 程序开发者 消费:24.43元 2019-02-01 09:00 09:006楼

      一来就看到有分拿，还没人领呢，一会去给你写个

      snscn 消费:1862.35元 其他手机 2019-02-01 09:04
      积分给大神留着
    0 赏钱 赏礼回复
    与天地合其德,与日月合其明,与四时合其序,与鬼神合其吉凶
    • 黄老邪-1731 普通粉丝 消费:5798.24元 2019-01-31 23:49 23:496楼
      这个要用JS，根据点击的栏目ID，作为调用栏目的上级ID，也就是栏目表中的pid字段，在模板中应当是$fid吧。
      snscn 消费:1862.35元 其他手机 2019-01-31 23:52
      不晓得，我觉得应该标签能实现的。其它cms我会，x1刚接触个把月，好多不晓得咋调用。
      现在主要是调不出来上级。老铁，你有这样调用过吗？
    0 赏钱 赏礼回复
    更多回复
    恢复多功能编辑器
  • 3 1
    • 草根站长圈
        圈内贴子440
    • 圈子成员200
    本圈子内的新贴

    热门分类
    推荐内容
    扫一扫访问手机版
    请选择要切换的马甲:

    打造最专业的开源系统建站程序
     
    网页即时交流
    QQ咨询
    咨询热线
    020-28998648
    微信扫一扫
    加客服微信