XSL模板导航问题：子项及无下级项不应带menu-item-has-children类

需求：仅带有子菜单的父项（如Accounts）需要添加menu-item-has-children类，子菜单项（Login and Register等）和无下级的Contact项不需要该类。当前XSL模板生成的所有<li>标签都带有该类，需修正模板以匹配目标HTML结构。

目标HTML结构 #

<ul class="menu-section">
  <li class="menu-item-has-children">
    <a href="#">Accounts <i class="ion ion-ios-arrow-down"></i></a>
    <div class="menu-subs menu-column-1">
      <ul>
        <li><a href="#">Login and Register</a></li>
        <li><a href="#">Help and Question</a></li>
        <li><a href="#">Privacy and Policy</a></li>
        <li><a href="#">Term of Cookies</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

当前XSL模板 #

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" indent="yes"/>
    <xsl:template match="/">
        <xsl:call-template name="menu"/>
    </xsl:template>
    <xsl:template name="menu">
        <ul id="wixmenu" class="menu-section">
            <xsl:apply-templates select="MENU/ITEM"/>
        </ul>
    </xsl:template>
    <xsl:template match="ITEM">
        <li class="menu-item-has-children">
            <a href="{URL}#" target="{TARGET}">
                <xsl:value-of select="TITLE"/>
                <i class="ion"/>
                <xsl:value-of select="ICON"/>
            </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>
</xsl:stylesheet>

当前错误生成结果 #

<ul class="menu-section">
  <li class="menu-item-has-children">
    <a href="#">Accounts <i class="ion ion-ios-arrow-down"></i></a>
    <div class="menu-subs menu-column-1">
      <ul>
        <li class="menu-item-has-children"><a href="#">Login and Register</a></li>
        <li class="menu-item-has-children"><a href="#">Help and Question</a></li>
        <li class="menu-item-has-children"><a href="#">Privacy and Policy</a></li>
        <li class="menu-item-has-children"><a href="#">Term of Cookies</a></li>
      </ul>
    </div>
  </li>
  <li class="menu-item-has-children"><a href="#">Contact</a></li>
</ul>

修改后的XSL模板 #

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" indent="yes"/>
    <xsl:template match="/">
        <xsl:call-template name="menu"/>
    </xsl:template>
    <xsl:template name="menu">
        <ul id="wixmenu" class="menu-section">
            <xsl:apply-templates select="MENU/ITEM"/>
        </ul>
    </xsl:template>
    <xsl:template match="ITEM">
        <li>
            <!-- 仅当当前ITEM有子节点时添加类 -->
            <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"/>
                <xsl:value-of select="ICON"/>
            </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>
</xsl:stylesheet>

修改说明 #

• 移除<li>标签上固定的menu-item-has-children类
• 添加<xsl:if test="ITEM">条件判断，仅当当前ITEM节点包含子ITEM时，为<li>动态添加menu-item-has-children类
• 无下级的菜单项（如Contact）和子菜单项因不满足test="ITEM"条件，不会带上该类，完全匹配目标HTML结构

内容的提问来源于stack exchange，提问作者wixily jnr