本文详解如何在 XSLT 中动态为含子菜单的导航项添加 menu-item-has-children 类，同时避免将其错误应用于末级菜单项，确保生成 HTML 结构与设计完全一致。
本文详解如何在 xslt 中动态为含子菜单的导航项添加 `menu-item-has-children` 类，同时避免将其错误应用于末级菜单项，确保生成 html 结构与设计完全一致。
在构建基于 XML 数据驱动的 HTML 导航菜单时，XSLT 模板需精确区分“有子菜单”与“纯链接”两类菜单项。原始模板中，所有 <li> 元素统一硬编码 class="menu-item-has-children"，导致末级菜单（如 Login and Register）也被错误赋予该类——这不仅违背语义，还可能破坏 CSS 样式或 JavaScript 交互逻辑。
核心解决方案是按需动态添加 class 属性：仅当当前 ITEM 元素下存在子 ITEM 节点时，才为其 <li> 添加 menu-item-has-children 类。这通过 <if></if> 判断配合 <attribute></attribute> 实现，而非静态写死：
<xsl:template match="ITEM">
<li>
<xsl:if test="ITEM">
<xsl:attribute name="class">menu-item-has-children</xsl:attribute>
</xsl:if>
<a href="{URL}#" target="{TARGET}">
<xsl:value-of select="TITLE"/>
<i class="ion ion-ios-arrow-down"/>
</a>
<xsl:if test="ITEM">
<div class="menu-subs menu-column-1">
<ul>
<xsl:apply-templates select="ITEM"/>
</ul>
</div>
</xsl:if>
</li>
</xsl:template>✅ 关键改进点：
<li>的class属性由条件动态注入，彻底解耦结构与样式逻辑；- 子菜单项（如 Contact）因无子
ITEM，生成的<li>不含任何 class，符合预期；- 箭头图标
<i class="ion ion-ios-arrow-down"></i>已修正为完整 CSS 类名（原模板中ICON元素未被正确嵌入<i></i>内，此处直接使用标准类名，更简洁可靠）。
⚠️ 注意事项：
- 若需保留
ICON字段的动态性（例如不同菜单项显示不同图标），应改用<i class="ion {ICON}"></i>或<i><attribute name="class">ion <value-of select="ICON"></value-of></attribute></i>； -
href="{URL}#"中的#是占位符，生产环境建议校验URL是否为空，避免生成href="#"影响可访问性； -
<output method="xml" indent="yes"></output>适用于生成 XHTML；若目标为 HTML5，推荐改为<output method="html" indent="yes" omit-xml-declaration="yes"></output>以确保浏览器兼容性。
最终输出将严格匹配原始 HTML 结构：仅 Accounts 项携带 menu-item-has-children 类，其子项均为纯净 <li><a>...</a></li>，无冗余 class，真正实现「所见即所得」的导航渲染。
