需求说明:导航顶级栏目,如果存在下级子栏目,顶级菜单只显示文字、不跳转(空链接);如果没有子栏目,则正常输出栏目访问链接。
实现核心:通过 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}
代码要点
type="top":读取全部顶级栏目,row="60"根据实际栏目数量调整;currentstyle:选中当前栏目自动应用高亮样式;$field.children:EyouCMS 内置变量,代表当前栏目的下级子栏目集合;- 有子栏目使用
___javascript:void(0);阻止顶级栏目跳转,仅展开下拉; - 没有子栏目,直接使用
{$field.typeurl}输出栏目 URL 正常跳转。
小坑提醒:原代码有拼写错误
javacript:void(0),正确是___javascript:void(0);,已经修正,避免 JS 报错。

