Bootstrap коллапс / аккордеон на столе не работает как положено - PullRequest
Новая
       43

Bootstrap коллапс / аккордеон на столе не работает как положено

0 голосов
/ 19 февраля 2020

У меня есть bootstrap таблица с 4 строками. Можно щелкнуть каждую из этих строк, открывая дочерние строки, которые уникальны для каждой из четырех родительских строк.

Все работает нормально, пока я сверну строку, прежде чем развернуть другую, но если я сверну ее Строка, а затем раскладывание другой, только одна дочерняя строка будет отображаться внутри этой вновь не свернутой родительской строки, даже если предполагается, что дочерних строк должно быть больше, чем просто внутри этой родительской строки. Затем, если я снова нажму на родительскую строку, она покажет все дочерние строки внутри этой родительской строки, кроме той, которая только что показывалась.

Как мне исправить это глючное поведение? Я должен быть в состоянии щелкнуть родительскую строку, не свернув предыдущую. В идеале предыдущая строка должна быть свернута автоматически при открытии новой строки.

Таблица Razor Page: 

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

1 Ответ

0 голосов
/ 21 февраля 2020

Как подсказал @Nan Yu выше, я исправил это следующим образом:

Вы можете попробовать удалить attribute data-parent="#accordionTable" в дочерних tr тегах, а затем добавить class ="collapse" в дочерних tr-тегах. , Как style="cursor:default; background-color: white;" class="collapse" id="@("innerTable" + i)"> - Нан Ю

...