使 table 行表现得像手风琴

Question

我正在使用 table 来显示作业。 table 行的初始高度值为 300 像素。当加载 table 时，table 行高减小到 50px 以便隐藏一些细节，这是通过添加样式来完成的。

.hidedetails {
 max-height: 50px; 
}

要显示隐藏的详细信息，用户需要单击 向下箭头。通过这样做，删除了 .hidedetails 样式并添加了以下内容，同时 down-arrow 更改为 up-arrow .

.showdetails {
 min-height: 300px; 
}

要再次隐藏详细信息，用户只需单击向上箭头，然后再次变为向下箭头。结果如下：

我想知道如果单击未选中的 table 行的向下箭头，如何隐藏正在显示的 table 行的详细信息。我试过 JQuery 但它不起作用。

Answer 1

万一有人感兴趣，我可以通过将其添加到箭头图标的 onClick 事件中来实现我想要的效果，这是一个 按钮小部件.

var tableRow = widget.parent.parent;
var rows = tableRow.parent.children._values;

if (widget.text === ("keyboard_arrow_down") ) { 
  for (var i = 0; i < rows.length; i++) {
    if (rows[i].name.indexOf('Table2Row') > -1) {
      rows[i].styles = ['hidedetails'];
      rows[i].descendants.Button3.text = "keyboard_arrow_down";
    }  
  }
  tableRow.styles = ['showdetails'];
  widget.text = "keyboard_arrow_right";
} else if (widget.text === ("keyboard_arrow_right")){
    tableRow.styles = ["hidedetails"];
    widget.text = "keyboard_arrow_down";
}

使 table 行表现得像手风琴

Make table row behave like an accordion

google-app-maker