当编程设置类ID时，嵌套的手风琴表图标不会改变

我在Grails .gsp页面中嵌套了手风琴引导程序表，可以正常工作，除了图标从“+”变为“ - ”时折叠/扩大。如果我取出动态ID变量并静态设置数据目标ID，而不是使用data-target =“＃$ {orgs.ORGN}”和id =“$ {orgs.ORGN}”，则可以使其工作。当我让g：each循环创建id和数据时，图标不会改变，尽管它们确实会崩溃。有什么想法吗？有没有什么关于设置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"); 
});

感谢您的帮助。

来源

2016-11-09 Greg

确保任何值'orgs.ORGN'都不会是另一个HTML/dom元素的重复'id'。这可能是你的问题。将HTML呈现给浏览器后检查您的HTML。 –

我已经在DOM上了，而且这些ID是唯一的。我甚至复制了Firebug的现有渲染输出并粘贴到bootply中，并在粘贴时运行。我不明白为什么它不能自行工作。我正确的在.gsp的部分中的JS如下所示： – Greg

是的，这是有效的。当然，你还没有在你的问题中包括一个完整的例子，所以你仍然可能会错过简单的东西。比如不等待文档/ DOM准备就绪，并试图在头部运行你的jQuery代码。 –

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

来源

2016-11-10 15:33:27

当编程设置类ID时，嵌套的手风琴表图标不会改变

回答

相关问题