当以编程方式设置 class 时，嵌套手风琴 table 图标不会更改

Question

我在 Grails .gsp 页面中嵌套了手风琴 bootstrap 表格，工作正常，除了当 collapsing/expanding 时图标从“+”变为“-”。如果我取出动态 id 变量并静态设置数据目标 id 而不是使用 data-target="#${orgs.ORGN}" 和 id="${orgs.ORGN }”。当我让 g:each 循环创建 id 和数据时，图标不会改变，尽管它们会正确折叠。有什么想法吗？是否有关于动态设置 id 的东西不起作用？

<div class="col-lg-8">
<div class="panel panel-default">
    <div class="panel-heading"></div>
        <table class="table table-condensed" style="border-collapse:collapse;">
            <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Org</th>
                <th>Description</th>
                <th>Budget</th>
                <th>YTD</th>
                <th>Remaining</th>
            </tr>
            </thead>
            <tbody>
            <g:each in="${overview}" var="orgs">
                <tr data-toggle="collapse" data-target="#${orgs.ORGN}" class="accordion-toggle" style="cursor:pointer">
                    <td><i class="fa fa-plus-square"></i></td>
                    <td>${orgs.ORGN}</td>
                    <td>${orgs.ORGNTITLE}</td>
                    <td>${orgs.BUDGET}</td>
                    <td>${orgs.YTD}</td>
                    <td>${orgs.REMAINING}</td>
                </tr>
                <td colspan="8" class="hiddenRow">
                    <div class="accordian-body collapse" id="${orgs.ORGN}">
                        <table class="table table-condensed">
                        <thead>
                            <tr><th>Account</th>
                                <th>Title</th>
                                <th>Budgeted</th>
                                <th>YTD</th>
                                <th>Remaining</th>
                            </tr>
                            </thead>
                            <tbody>
                            <g:each in="${orgs.expenses}" var="budget">
                                <tr>
                                    <td>${budget.ACCTCODE}</td>
                                    <td>${budget.ACCTTITLE}</td>
                                    <td>${budget.BUDGETACCEPTED}</td>
                                    <td>${budget.YTDACTIVITY}</td>
                                    <td>${budget.BUDGETREMAINING}</td>
                                </tr>
                            </g:each>
                            </tbody>
                        </table>
                    </div>
                </td>
            </g:each>
            </tbody>
        </table>
</div>
</div>

我的 JS 是

  $('tr').on('shown.bs.collapse', function(){
$(this).prev('tr').find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).prev('tr').find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});

感谢您的帮助。

Answer 1

听起来您正试图在 DOM 完全加载之前运行您的 jQuery 代码。我建议在 jQuery documentation 中查看执行此操作的各种方法。通常这是使用 $( document ).ready().

完成的

当以编程方式设置 class 时，嵌套手风琴 table 图标不会更改

Nested Accordion table icon won't change when class id set programatically

javascript

twitter-bootstrap

grails

gsp