Html 使用循环创建手风琴引导_Html_Twitter Bootstrap_Velocity

Html 使用循环创建手风琴引导

html twitter-bootstrap

Html 使用循环创建手风琴引导,html,twitter-bootstrap,velocity,Html,Twitter Bootstrap,Velocity,我试图通过循环字段来创建手风琴。它获取信息并正确返回。唯一的问题是，当单击一个面板时，另一个打开的面板不会折叠。有没有办法解决这个问题 #elseif（$column.getChild（“features”）。value==“Accordion”） #set（$accordions=$\u XPathTool.selectNodes（$column，“accordion”）） #设置（$accHeading=$column.getChild（“accHeading”）.value） $\u S

我试图通过循环字段来创建手风琴。它获取信息并正确返回。唯一的问题是，当单击一个面板时，另一个打开的面板不会折叠。有没有办法解决这个问题

#elseif（$column.getChild（“features”）。value==“Accordion”）
#set（$accordions=$\u XPathTool.selectNodes（$column，“accordion”））
#设置（$accHeading=$column.getChild（“accHeading”）.value）
$\u SerializerTool.serialize（$column.getChild（“acchiding”），true）
#foreach（$accordion in$accordions）
#set（$accTitle=$accordion.getChild（“accTitle”）.value）
#set（$accContent=$accordion.getChild（“accContent”）.value）
${accContent}
#结束

您在循环外部添加了

，这应该在foreach内部，因为它有多个面板。看看正确的引导式手风琴结构：

您可以找到最简单的方法


标题1（面板编号0）
关于标题1的文本
标题2（面板编号1）
关于标题2的文本
标题3（面板编号2）
文本标题3
标题4（面板编号3）
关于标题4的文本。
$（文档）.ready（函数（）{
$（'手风琴'）。手风琴({
活动：错误，
可折叠：正确
});
})

我一开始就试过了，但不幸的是没有成功。仍然得到相同的结果。我想你已经看过了吗？你能把这个放到jsfiddle.net中吗？

        #elseif ($column.getChild("features").value == "Accordion" )
            #set ( $accordions = $_XPathTool.selectNodes($column, "accordion") )
            #set ( $accHeading  = $column.getChild("accHeading").value )      

            <h2>$_SerializerTool.serialize($column.getChild("accHeading"), true)</h2>
            <div class="panel-group" id="accordian">
                <div class="panel panel-default">      

            #foreach ( $accordion in $accordions )
                #set ( $accTitle = $accordion.getChild("accTitle").value )
                #set ( $accContent = $accordion.getChild("accContent").value )

                    <div class="panel-heading">      
                        <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse${foreach.index}">${accTitle}</a>
                        </h4>
                    </div>
                        <div id="collapse${foreach.index}" class="panel-collapse collapse">
                            <div class="panel-body">${accContent}</div>
                        </div>
            #end
                </div>
            </div>

<html>
<head>
<title></title>
</head>

<div id='accordion' class='accordion'>
 <h3>Header 1 ( panel No. 0 )</h3>
  <div>
    Text about Header 1    
  </div>
 <h3>Header 2 ( panel No. 1 )</h3>
  <div>
    Text about Header 2    
  </div>
<h3>Header 3 ( panel No. 2 )</h3> 
  <div>
    Text header 3
  </div>
<h3>Header 4 ( panel No. 3 )</h3>
  <div>
    Text about Header 4.
   </div>
</div>

<script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.min.js'></script>
<link href='https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css' rel='stylesheet'>

<script>
$(document).ready(function() {

$( '#accordion' ).accordion({
active: false,
collapsible: true
});

})
</script>
</body>
</html>