Appmaker中的手风琴 [英] Accordion in appmaker
本文介绍了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屋!
查看全文