javascript - 除第一次外,两级 Accordion 不工作

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

请注意,有两层 Accordion 具有正确的 id 和父 id。他们都是第一次扩张。一旦我改变了一些东西, Accordion 就不再扩展了。可能是什么问题。

最佳答案

您缺少一个 <div class="accordion-group">在你的周围accordion-headingaccordion-body .这可能会给您带来问题。请参阅 http://twitter.github.com/bootstrap/javascript.html#collapse 上的示例并查看源代码以了解他们是如何实现的。

关于javascript - 除第一次外,两级 Accordion 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12086548/

相关文章:

javascript - 单击行时无法转到新 Activity

javascript - 为什么我的脚本第一行出现 JS 错误语法错误 : invalid or unexpected token?

javascript - odata 查询在 ie 7 中不起作用

javascript - 重新设置相对 css url 的相对导入

css - Material Design Lite 徽章变色

jquery - fadeOut() 和 fadeIn() 在同一 Action 中

css - 调整 Bootstrap 3 表单控件的大小

css - 另一个 <ul> 内的 <ul> 继承样式

java - 整个网络应用程序的自动完成功能

javascript - 如何在验证后显示 Bootstrap 模式窗口?