除了第一次以外,两级手风琴都没有工作

时间:2012-08-23 07:15:09

标签: javascript css twitter-bootstrap accordion

我有以下代码

<g:each in="${elementGroups}">
            <div class="accordion" id="accordion${it.id}">
                <!-- Element Group Heading -->
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion${it.id}" href="#collapse${it.id}"> 
                    <b>${it.name}</b>
                    </a>
                </div>
                <!-- Elements -->
                <div id="collapse${it.id}" class="accordion-body collapse">
                    <g:each  var="element" in="${it.elements}">
                        <!--  -->
                        <div class="accordion" id="accordion${it.id}-${element.id}">
                            <div class="accordion-heading" style="margin-left: 30px">
                                <label class="radio" class="accordion-toggle" data-toggle="collapse"    data-parent="#accordion${it.id}-${element.id}" data-target="#collapseOne${it.id}-${element.id}">
                                <input type="radio" name="optionsCheckboxList" value="${element.id}"/>${element.name}
                                </label>
                            </div>
                            <div id="collapseOne${it.id}-${element.id}" class="accordion-body collapse">
                            <div class="accordion-inner" style="margin-left: 60px">

                            <!-- Sample Description -->
                            <g:each var="desc1" in="${element.descriptions}">
                                <input type="radio" name="selComment" value="${desc1.name}" onclick="populateComment(this.value)"/>${desc1.name}<br/>
                            </g:each>
                            </div></div>
                        </div>
                        <!--  -->
                    </g:each>
                </div>
            </div>
        </g:each>

请注意,有两种级别的手风琴具有正确的ID和父ID。它们都是第一次扩展。一旦我换了东西,手风琴就不再扩展了。可能是什么问题。

1 个答案:

答案 0 :(得分:0)

您在<div class="accordion-group">accordion-heading周围错过了accordion-body。这可能会导致你的问题。请参阅http://twitter.github.com/bootstrap/javascript.html#collapse上的示例并查看源代码以了解它们如何实现它。