Question

我有一个包含多行的表格。您可以找到表格Here

从下拉列表和表格中选择任何项目。

该表显示每行一个团队。如果球队已经参加比赛，那么比赛的结果可以在非常正确的单元格中看到。如果匹配尚未播放，则会有一个按钮，在该行下方会有一个隐藏的行，在单击该按钮后会出现。

我对此表有两个问题：

1）隐藏行的团队比其他团队更高。但无论如何我无法改变他们的身高。

2）对于有隐藏行的团队，团队之间的差距会大1px。问题是由tr元素引起的。但它没有大小和   边界，为什么要占用空间？我可以将其显示设置为   没有，然后拿走它，但然后它打破了我的动画。

这两个问题都与隐藏行有关，所以我认为这就是原因。但我真的不知道如何解决它。

使用此js：

完成展开/折叠

    if (this.dialogHidden) {
        this.enterDialog.css('height', '75px');
        this.enterDialog.css('border-style', 'solid');
        this.dialogHidden = false;
    }
    else {
        this.enterDialog.css('height', '0px');
        this.enterDialog.css('border-style', 'none');
        this.dialogHidden = true;
    }

展开/折叠enterDialog元素的动画正在使用转换（参见下面的css代码）：

.enterDialog {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    border: none 1px #FB667A;
    -moz-transition: height .5s;
    -ms-transition: height .5s;
    -o-transition: height .5s;
    -webkit-transition: height .5s;
    transition: height .5s;
    height: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

Answer 1

具有隐藏行的团队具有更高的高度，因为“输入结果”具有2％的填充设置。将以下内容添加到“foosball.css”：

.tdButton { padding-top: 0!important; padding-bottom: 0!important; }
隐藏行的团队间隙较大，因为 dummy TR实际上并未隐藏。将以下内容添加到'foosball.css'：

tr.dummy{ display: none; }

在enterResult.js第157行中，更改此内容：

if (this.dialogHidden) {
    // this.tr.removeClass('hidden');
    this.enterDialog.css('height', '75px');
    this.enterDialog.css('border-style', 'solid');
    this.dialogHidden = false;
}
else {
    // this.tr.addClass('hidden');
    this.enterDialog.css('height', '0px');
    this.enterDialog.css('border-style', 'none');
    this.dialogHidden = true;
}

到此：

if (this.dialogHidden) {
    // this.tr.removeClass('hidden');
    this.tr.css("display", "table-row");
    this.enterDialog.css('height', '75px');
    this.enterDialog.css('border-style', 'solid');
    this.dialogHidden = false;
}
else {
    // this.tr.addClass('hidden');
    this.tr.css("display", "none");
    this.enterDialog.css('height', '0px');
    this.enterDialog.css('border-style', 'none');
    this.dialogHidden = true;
}

请注意，您将丢失行扩展动画。但是如果你使用JQuery，动画可以添加到一行。

要添加动画，请将Jquery包含到您的页面，然后在enterResult.js第157行中，替换为：

this.tr.css("display", "table-row");

由此：

$(this.dom).find("tr.dummy").slideDown();

和此：

this.tr.css("display", "none");

由此：

$(this.dom).find("tr.dummy").slideUp();

这应该会带回动画。

不可见元素占用空间，不能改变表格单元的高度

1 个答案: