Question

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

但是由于缺陷，第一手风琴行显示的是细节部分...除非我们指定了细节（单击“扩展”按钮），否则我不想显示细节。

有可能吗？我试图通过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模板。它以“手风琴展开/未展开”为例。

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

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

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

/**
 * 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中的手风琴

1 个答案: