Question

我应该在这个问题的前言中说我绝对没有html / css / javascript的背景，所以请对我说话，对不起，如果我使用错误的条款或者问一个愚蠢的问题/没有提供足够的信息！< / p>

我正在尝试使用可扩展的表格，并通过阅读论坛帖子/教程（将“next”更改为“nextUntil”，尝试使用nth-child然后将其删除等）进行几轮脚本更改后，它按照我想要的方式工作（当点击一行而不是一行时显示接下来的两行）。

然而，出于某种莫名其妙的原因，显示的行现在缩小到仅第一个td的宽度。单击时，隐藏的行是正确的宽度。

现在的表格是here 显示宽度正确的行（当前版本）的jsFiddle是here。

不得不插入代码或我无法发布此问题：

$(document).ready(function(){
     $("#report tr.show").click(function(){
         $(this).nextUntil("tr.show").toggle();
         $(this).find(".arrow").toggleClass("up");
         $(this).find(".show").not(".show").fadeOut(350)
         $(this).find(".show").fadeToggle(350);
     });            
     //$("#report").jExpand();
});

当我删除tr class="show"时，该行恢复到正确的宽度，但我没有看到任何会导致此行为发生的事情（因为上一个表没有这个问题，并且唯一的区别就是行数和javascript的变化。没有进行CSS更改，也没有添加样式表。）

真诚地感谢任何帮助，我不知道如何继续！

Answer 1

您可以替换CSS中的小更改：

替换此

.show {
  display: block;
}

用这个

.show {
  display: table-row;
}

无法正确显示行

1 个答案: