桌子上的引导折叠/手风琴没有按预期工作答案

【问题标题】：Bootstrap collapse/accordion on table not working as intended桌子上的引导折叠/手风琴没有按预期工作
【发布时间】：2020-06-03 08:30:39
【问题描述】：

我有一个 4 行的引导表。可以单击这些行中的每一行，从而显示对于四个父行中的每一行都是唯一的子行。

只要我在取消折叠另一行之前折叠一行，一切都可以正常工作，但如果我先取消折叠一行，然后再取消折叠另一行，则只有一个子行会显示在这个新未折叠的父行中，即使如果应该有比父行内的子行更多的子行。然后，如果我再次单击父行，它将显示该父行内的所有子行，除了刚刚显示的那一行。

如何解决此故障行为？我应该能够单击父行而无需先折叠前一行。理想情况下，前一行会在取消折叠新行时自动折叠。

Razor 页面表：

<table id="accordionTable" class="table" style="border-collapse:collapse;">
        <thead style="color:white;">
        <th>DATABASE</th>
        <th>STATUS</th>
        </thead>

        @for (var i = 0; i < Model.statusList.Count; i++)
        {
            <tr data-toggle="collapse" data-target="@("#innerTable" + i)">
                <td>@Model.Databases[i]["DATABASE_NAME"].ToString().ToUpper()</td>
                <td @*class="@Model.StatusAll[i]"*@>@Model.StatusAll[i]</td>
            </tr>

            foreach (var number in Model.statusList[i])
            {
                <tbody>
                    <tr @if (number.ToString() == "Running...") { @: style="background-color: #ccffc4;"
                        } else if (number.ToString() == "Scheduled") { @: style="background-color: #d1f3fc;"
                        } else if (number.ToString() == "Failed") { @: style="background-color:#ffe4e4;"
                        }
                        style="cursor:default; background-color: white;" data-parent="#accordionTable" id="@("innerTable" + i)">

                        <td> @number.ToString()</td>
                        <td @if (number == "Running...") { @: class="fas fa-spinner"
                            } else if (number == "Scheduled") { @: class="far fa-clock"
                            } else if (number == "Failed") { @: class="fas fa-exclamation-triangle"
                            }>
                        </td>
                    </tr>
                </tbody>
            }
        }
    </table>

【问题讨论】：

您可以尝试删除子tr标签中的data-parent="#accordionTable" 属性，然后在子tr标签中添加class ="collapse"。喜欢style="cursor:default; background-color: white;" class="collapse" id="@("innerTable" + i)">

标签： c# asp.net-core razor bootstrap-4 razor-pages

【解决方案1】：

正如上面@Nan Yu 所建议的，这就是我修复它的方法：

您可以尝试删除子tr 标记中的attribute data-parent="#accordionTable"，然后在子tr 标记中添加class ="collapse"。赞style="cursor:default; background-color: white;" class="collapse" id="@("innerTable" + i)"> – 南宇

【讨论】：