appmaker 中的手风琴

Question

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

但是由于缺陷，手风琴的第一行显示了详细信息部分...我不想显示详细信息，除非我们指定它（单击 "expand" 按钮）

这可能吗？我尝试通过 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模板。它有手风琴的例子 Expanded/Not Expanded.

总体而言，您需要绑定以下 onAttach 事件。

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

在 onClick() 事件上绑定 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);
  }
}

appmaker 中的手风琴

Accordion in appmaker

google-apps-script

google-app-maker