Eyoucms如何判断顶级栏目,如果有下级就不带链接,没有下级就带链接!

需求说明:导航顶级栏目,如果存在下级子栏目,顶级菜单只显示文字、不跳转(空链接);如果没有子栏目,则正常输出栏目访问链接。

实现核心:通过 notempty 判断 $field.children 是否存在子栏目,有子栏目时设置空点击链接,同时循环渲染下级菜单;无子栏目直接输出栏目真实地址。

{eyou:channel type="top" row="60" id="field" currentstyle="background:#0976dc"}

    {eyou:notempty name="$field.children"}
    <!-- 存在子栏目:顶级栏目空链接,渲染下拉子菜单 -->
    <li class="menu">
        <a href="___javascript:void(0);" style="{$field.currentstyle}">{$field.typename}</a>
        <ul class="sub">
            {eyou:channel name="$field.children" row="100" id="field1"}
            <li><a href="{$field1.typeurl}">{$field1.typename}</a></li>
            {/eyou:channel}
        </ul>
        <span></span>
    </li>
    {eyou:else /}
    <!-- 无下级子栏目:输出栏目真实访问链接 -->
    <li>
        <a href="{$field.typeurl}" style="{$field.currentstyle}">{$field.typename}</a>
    </li>
    {/eyou:notempty}

{/eyou:channel}

代码要点

  1. type="top":读取全部顶级栏目,row="60" 根据实际栏目数量调整;
  2. currentstyle:选中当前栏目自动应用高亮样式;
  3. $field.children:EyouCMS 内置变量,代表当前栏目的下级子栏目集合;
  4. 有子栏目使用 ___javascript:void(0); 阻止顶级栏目跳转,仅展开下拉;
  5. 没有子栏目,直接使用 {$field.typeurl} 输出栏目 URL 正常跳转。

小坑提醒:原代码有拼写错误 javacript:void(0),正确是 ___javascript:void(0);,已经修正,避免 JS 报错。



h6.png


分享: