Bootstrap 折叠不适用于表行 - 目前必须单击两次才能折叠子行

Question

我正在尝试在表格行上使用 Bootstrap 折叠功能。 我有一个 JS fiddle 来演示由于它无法正常工作而发生的事情。 目前，您必须在 Group 上单击两次才能折叠子行（但这只能在第一次完成）。

http://jsfiddle.net/48swgomj/

在下面的代码中，我将 data-target 设为 #collapsegroup1，这是我的子组件的 id，所以不确定哪里出错了：

<tr data-toggle="collapse" data-target="#collapsegroup1" class="accordion-toggle rowscss" style="background-color: #41A1AF !important; color: white"><!--!-->
                                    <td style="text-align: left;" class="datatablerowpadding">Group A</td><!--!-->
                                    <td style="text-align: right;" class="datatablerowpadding">9,250</td><!--!-->
                 

                                </tr><!--!-->
                                <tr class="rowscss" id="collapsegroup1"><!--!-->

                                    <td style="text-align: left;" class="datatablerowpadding">Apple</td><!--!-->
                                    <td style="text-align: right;" class="datatablerowpadding">6,000</td><!--!-->
                        
                        


                                </tr><!--!-->
                                <tr class="rowscss" id="collapsegroup1"><!--!-->

                                    <td style="text-align: left;" class="datatablerowpadding">Bannana</td><!--!-->
                                    <td style="text-align: right;" class="datatablerowpadding">3,250</td><!--!-->
                                  


                                </tr><!--!-->

如果您单击“A 组” - 第一次单击不会注册折叠，但是当您再次单击时，它会折叠子项。 我如何获得它，以便在您第一次单击时它会崩溃？ 看不到我在哪里出错了。 第一次单击它后，它就可以正常工作，因此似乎只是对组行的初始单击。

我发现当我单击该组时，它会添加 class 'show' 但由于它已经显示，我认为这就是您必须单击两次的原因。 我该如何防止这种情况？

默认情况下，我希望它显示，我需要在单击组时切换它。 当 class 已经显示时，不要添加它

Answer 1

http://jsfiddle.net/yk4bqjfx/

我必须将“显示” class 作为默认值添加到子行中，这很有效。

例子：

 <tr class="rowscss show" id="collapsegroup1"><!--!-->

                                    <td style="text-align: left;" class="datatablerowpadding">Bannana</td><!--!-->
                                    <td style="text-align: right;" class="datatablerowpadding">3,250</td><!--!-->
                                  


                                </tr><!--!-->