使用循环创建手风琴 - Bootstrap

Question

我正试图通过字段来创建一个手风琴。它正在获取信息并正确返回。唯一的问题是，当单击面板时，另一个打开的面板不会崩溃。任何想法如何解决这一问题？

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

Answer 1

你有<div class="panel panel-default">添加到循环之外，这应该在foreach内部，因为它有多个面板。看看正确的Bootstrap手风琴结构：http://getbootstrap.com/javascript/#collapse-example-accordion

Answer 2

你可以找到最简单的方式here

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

使用循环创建手风琴 - Bootstrap

问题描述投票：1回答：2

2个回答

最新问题

使用循环创建手风琴 - Bootstrap

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2