首页 文章

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

提问于
浏览 次
0

我正在使用bootstrap手风琴来创建使用XSLT的FAQ列表 . 它使用默认的'collapse'javascript来切换 Headers 以显示描述 . 见下面的代码：

<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）正在应用

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

twitter-bootstrap xslt accordion umbraco

1 回答

  • 0

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

    当使用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>

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

    回复于

相关问题