javascript - 如何在 xslt 中的 div 上添加展开和折叠图像

Question

我用一些数据创建了一些动态 div，现在所有 div 都可以完美地展开和折叠。现在如何在 div 上添加展开和折叠图像。我是 xslt 设计的新手。

<xsl:template match="category[key!='org.model.Category.uncategorized']">
<xsl:param name="cont"/>
<xsl:if test="$cont != 'true'">
 <xsl:variable name="key" select="key"/>
 <li>
 <div class="mainDiv">
    <div class="subDiv">
   <a href="#"   onClick="collapseList(document.getElementById('{generate-id()}'))">
        <span>
            <xsl:value-of select="$key"/>
        </span>
    </a>                
    </div>
    <div class="childsubDiv" id="{generate-id()}" >
    <ul id="subMenu" class="subMenu">
        <xsl:for-each select="pages/page">
         <xsl:sort select="@order" data-type="number"/>
             <xsl:apply-templates select=".">
             <xsl:with-param name="cont" select="$cont"/>
             </xsl:apply-templates>
        </xsl:for-each>
    </ul>
    </div>
</div>
</li>
</xsl:if>      
</xsl:template>

javascript代码在这里:

<script language="javascript" type="text/javascript">
<xsl:text>
    function collapseList(element){
    element.style.display = element.style.display == 'none' ? '' :   'none';
    }
</xsl:text>

Answer 1

假设您的 XSLT 还生成一个 HTML 的“head元素”，您可以在其中插入 CSS(与 style 元素内联或与 link 元素外部)，您可以添加类似 CSS

<style>
a.expander span::before { content: " - "; font-size: 120%; }
a.expander.collapsed span::before { content: " + "; font-size: 120%;}
</style>

然后改变你必须的模板

<xsl:template match="category[key!='org.model.Category.uncategorized']">
<xsl:param name="cont"/>
<xsl:if test="$cont != 'true'">
 <xsl:variable name="key" select="key"/>
 <li>
 <div class="mainDiv">
    <div class="subDiv">
   <a href="#" class="expander"  onclick="collapseList(document.getElementById('{generate-id()}')); this.classList.toggle('collapsed');">
        <span>
            <xsl:value-of select="$key"/>
        </span>
    </a>                
    </div>
    <div class="childsubDiv" id="{generate-id()}" >
    <ul id="subMenu" class="subMenu">
        <xsl:for-each select="pages/page">
         <xsl:sort select="@order" data-type="number"/>
             <xsl:apply-templates select=".">
             <xsl:with-param name="cont" select="$cont"/>
             </xsl:apply-templates>
        </xsl:for-each>
    </ul>
    </div>
</div>
</li>
</xsl:if>      
</xsl:template>

在那个例子中，我只是简单地插入了字符，如果你想使用图像而不是更改 CSS，例如

<style>
a.expander span::before { content: url(minus.gif); }
a.expander.collapsed span::before { content: url(plus.gif); }
</style>