引导程序显示和折叠表行

Question

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

然后，我在HTML文件中回显此数据，并使用引导程序创建表，该表完美地出现了，但是我希望能够使正在使用我的网站的用户能够单击一行等等。有关他们单击的行的详细数据会下降。 我为尝试实现此目的而编写的代码如下所示：

$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来配合使用，但是仍然无法正常工作。 是的，我正在将引导程序库和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'); } else{ $('#versions').addClass('in'); } });

Answer 1

“ in”类不适用于！important在分号之后。 因此，尝试这样做，我认为您至少会注意到一些变化：

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