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

我用一些数据创建了一些动态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>

函数collapseList（元素）{
element.style.display=element.style.display=='none'？'''none'；
}

---

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

a、 扩展器span:：在{content:“-”字体大小：120%；}
a、 expander.span:：在{content:“+”字体大小：120%；}

然后更改您必须更改的模板

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

a、 扩展器span:：在{content:url（减号.gif）；}
a、 expander.span:：在{content:url（plus.gif）；}

我在那里看不到任何

img

元素，也看不到任何CSS背景图像，因此您需要显示您想要图像的位置，以及是否要删除或更改其引用的源。@Martin Honnen:我想要锚定标记div上的图像如何添加CSS文件以及如何获取图像我有一个问题，首先是扩展，但是我想知道在哪里更改代码，然后生成

和