Question

我正在使用bootstrap手风琴来创建使用XSLT的常见问题解答列表。它使用默认的'collapse'javascript来切换标题以显示描述。请参阅以下代码：

<div class="span9 faqswhole">   
  <xsl:for-each select="$currentPage/faqs"> 

    <div class="accordion" id="accordion">

      <!--accordion group-->        
      <div class="accordion-group"> 

        <!--faq title-->  
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#faq1">
            <h3><xsl:value-of select="./faqTitle" /></h3>
          </a>
        </div>

        <!--faq description-->  
        <div id="faq1" class="accordion-body collapse in">
          <div class="accordion-inner">
            <p><xsl:value-of select="./faqText" disable-output-escaping="yes"/></p>
          </div>
        </div>
      </div>                        
    </div>  
  </xsl:for-each>
</div>

我知道目前每个div元素都在共享一个'id'，它将它们连接在一起。我希望做的是XSLT为每个faq描述创建一个动态手风琴（来自Umbraco中的doc类型。

目前我的所有按钮都只允许切换第一个FAQ细节，因为代码（xsl：for-each select）正在应用

我很感激有关如何解决这个问题的任何想法。干杯！

Answer 1

根据我的理解，您希望通过对两者使用相同的ID将标题连接到手风琴的内部部分。

使用for-each时，可以通过在for-each中调用position()方法轻松完成。

<div class="span9 faqswhole">   
  <xsl:for-each select="$currentPage/faqs"> 

    <div class="accordion" id="accordion">

      <!--accordion group-->        
      <div class="accordion-group"> 

        <!--faq title-->  
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">
            <xsl:attribute name="href">
                <xsl:text>#faq</xsl:text>
                <xsl:value-of select="position()" />
            </xsl:attribute>
            <h3><xsl:value-of select="./faqTitle" /></h3>
          </a>
        </div>

        <!--faq description-->  
        <div class="accordion-body collapse in">
            <xsl:attribute name="id">
                <xsl:text>faq</xsl:text>
            <xsl:value-of select="position()" />
            </xsl:attribute>
            <div class="accordion-inner">
                <p><xsl:value-of select="./faqText" disable-output-escaping="yes"/></p>
          </div>
        </div>
      </div>                        
    </div>  
  </xsl:for-each>
</div>

我没有测试过代码，所以请告诉我它是否有效！

如何使用XSLT创建动态（bootstrap）Accordion

1 个答案: