Question

我创建了一些带有一些数据的动态div，现在所有div都完全展开和折叠。现在如何在div上添加展开和折叠图像。我在 xslt 中进行设计。< / p>

<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 element where you can insert CSS (either inline with the样式element or external with a 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>

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

1 个答案: