google-apps-script - appmaker 中的 Accordion

Question

我在 Google App Maker 中制作了一个 Accordion ，它工作正常。

但由于缺陷， Accordion 的第一行显示了详细信息部分......我不想显示详细信息，除非我们指定它(单击“展开”按钮)

这可能吗？我试过通过 css 来实现它，但它不起作用......

我也试过这个:(小部件=展开按钮)

if (widget.parent.parent.children.Accordion1Detail.visible === false){
  widget.parent.parent.children.Accordion1Detail.visible = true;
} else {
  widget.parent.parent.children.Accordion1Detail.visible = false;
}

Answer 1

引用this模板。它有 Accordion Expanded/Not Expanded 的例子。

总的来说，您需要绑定(bind)以下 onAttach 事件。

  widget.styles = ['collapsed'];
  widget.getElement().removeAttribute('aria-expanded'); 

在onClick()事件上绑定(bind)toggleAccordionRow方法，

/**
 * Expands an accordion row. 
 * Extends default functionality of the Accordion widget.
 * @param {Widget} accordionRow - accordion row which was clicked.
 */
function expandAccordionRow(accordionRow) {
  var rows = accordionRow.parent.children._values;

  var i = 0;
  for (i = 0; i < rows.length; i++) {
    if (rows[i].name.indexOf('YourElementName') > -1) {
      rows[i].styles = [];
    } else {
      rows[i].styles = ['collapsed'];
    }
  }
  accordionRow.styles = [];
}


/**
 * Collapses an accordion row. 
 * Extends default functionality of the Accordion widget.
 * @param {Widget} accordionRow - accordion row which was clicked.
 */
function collapseAccordionRow(accordionRow) {
  var rows = accordionRow.parent.children._values;

  var i = 0;
  accordionRow.styles = ['collapsed'];

  for (i = 0; i < rows.length; i++) {
    if (rows[i].name.indexOf('YourElementName') > -1) {
      rows[i].styles = ['hidden'];
    }
  }
}


/**
 * Toggles the appearance of an accordion row. 
 * Extends default functionality of the Accordion widget.
 * @param {Widget} accordionRow - accordion row which was clicked.
 */
function toggleAccordionRow(accordionRow) {
  if (accordionRow.styles.length === 0) {
    collapseAccordionRow(accordionRow);
  } else {
    expandAccordionRow(accordionRow);
  }
}