javascript - Bootstrap 显示和折叠表格行

Question

所以我正在编写一个程序，使用 php 从数据库收集数据，并使用该数据创建 HTML 字符串，如下所示。

然后，我在 HTML 文件中回显这些数据，并使用 bootstrap 创建表格，表格完美显示，但我希望能够让使用我网站的用户能够单击行以及有关他们单击的行的更详细数据会下来。我为尝试完成此任务而编写的代码如下所示:

$htmlStr .= '<tr data-toggle="myCollapse" data-target="#details" class="accordion-toggle">';
$htmlStr .= '<td>' some data '</td>';
$htmlStr .= '<td class="text-center">' . number_format(more data) . '</td>';
$htmlStr .= '<td class="text-right">' . round(percentage of certain data) . '%</td>';
$htmlStr .= '</tr>';

$more = FunctionForDetails(details looking for);
$htmlStr .= $more;

其中 FunctionForDetails() 返回:

$htmlStr .= '<tr id="details" class="myCollapse">';
$htmlStr .= '<td class="text-center"><div>' . detailed data . '</div></td>';
$htmlStr .= '<td class="text-center"><div>' . more . '</div></td>';
$htmlStr .= '<td class="text-center"><div>' . more . '%</div></td>';
$htmlStr .= '</tr>';

我的表格中的所有行都显示得很好，但是当我单击一行时，什么也没有发生。我想要有关他们单击的行的更多详细数据，以下拉更多行，然后当他们再次单击它时消失。我还编写了一些 css 和 jQuery 来配合它，但它仍然不起作用。是的，我正在将 bootstrap 库和 jquery 库链接到我的 HTML。任何想法或有用的提示都会很棒，谢谢!

CSS 代码:

table .myCollapse {
   display: none;
}
table .myCollapse.in {
  display: table-row; !important
}

jQuery 代码:

$(".myCollapse").click(function() { if($('#versions').hasClass('in')){ $('#versions').removeClass('in'); } 别的{ $('#versions').addClass('in'); } });

Answer 1

“in”类不能与分号后面的 !important 一起使用。 因此，尝试这样做，我想您至少会注意到一些变化:

table .myCollapse.in {
  display: table-row !important;
}