google-app-maker - 使表格行表现得像手风琴

Question

我正在使用表格来显示作业。表格行的初始高度值为 300px。加载表格时，表格行高降低到 50px，这样一些细节就被隐藏了，这是通过添加样式来完成的。

.hidedetails {
 max-height: 50px; 
}

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

.showdetails {
 min-height: 300px; 
}

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

我想知道如果单击未选中的表格行的向下箭头，如何隐藏显示它们的表格行的详细信息。我尝试过使用 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";
}