Appmaker中的手风琴 [英] Accordion in appmaker

问题描述

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

I have made an accordion in Google App Maker and it's working fine.

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

But by defect, the first accordion row shows the detail part... I don't want to show the details unless we specify it (clicking on a "expand" button)

有可能吗?我试图通过css来做到这一点，但这是行不通的...

Is that possible? I have tried to do it via css and it doesn't work...

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

I also have tried this: (widget = expand button)

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

推荐答案

引用此模板.它以手风琴展开/未展开"为例.

Refer this template. It has the example of Accordion Expanded/Not Expanded.

总体上，您需要绑定以下onAttach事件.

Overall you need to Bind the following onAttach event.

  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中的手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！