What am i missing in the xsl template for my navigation

Question

I am trying to figure out the perfect xsl template for my html navigation.

Here is the html code

<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>

Here is my XSL Template:

<?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>

The result an getting is:

<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>

What i Want I want the child elements [login and Register, Help and Question, Privacy and Policy and Terms of Cookies] Not to have the class "menu-item-has-children". I just want the xsl template to produce the original html code.

Answer 1

Here's a version of your template in which the class attribute with value menu-item-has-children is added only the condition that the current ITEM element has ITEM children.

<?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>
            <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>

By the way, I wondered about your

<i class='ion'/><xsl:value-of select="ICON"/>

Did you maybe intend for the ICON element's text to be a child node of the i element?

<i class='icon'><xsl:value-of select="ICON"/></i>