TYPO3 gridelements 手风琴表演

Question

我正在使用 TYPO3 11.x 和 bootstrap_package 和 gridelements。

因为我想制作一个包含不同类型内容的手风琴，所以我将网格元素与数据处理集成在一起。

它几乎可以工作，但我没有在选择项上获得活动变量。 在第一次查看时，每个项目都设置为显示。 通过单击任何手风琴按钮，所有项目都会关闭（并且在通过单击任何项目打开每个项目后） 我必须做什么才能整合像

           <f:variable name="activeElement" value="{data.pi_flexform.default_element}" />

这样的东西

出了什么问题？ 这是我的模板

<div class="container">
<div class="accordion" id="accordion-{data.uid}">
    <f:for as="row" each="{children}">
        <f:for as="column" each="{row}">
            <f:for as="content" each="{column}" iteration="i">
            <div class="accordion-item">
                <h4 class="accordion-header" id="accordion-heading-{data.uid}-{record.data.uid}">
                    <button class="accordion-button{f:if(condition: '{activeElement} == {record.data.uid}', else:' collapsed')}" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#accordion-{data.uid}-{record.data.uid}"
                        data-bs-parent="#accordion-{data.uid}"
                        aria-expanded="{f:if(condition: '{activeElement} == {record.data.uid}', then: 'true', else: 'false')}"
                        aria-controls="accordion-{data.uid}-{record.data.uid}"
                    >
                        <a data-toggle="collapse" data-parent="#accordion{data.uid}" href="#collapse{content.data.uid}">
                           {f:if(condition: content.data.header, then: '{content.data.header}')}
                        </a>                       
                    </button>
                </h4>
                
                
                <div id="accordion-{data.uid}-{record.data.uid}" class="" aria-labelledby="accordion-heading-{data.uid}-{record.data.uid}" data-parent="#accordion-{data.uid}" data-bs-parent="#accordion-{data.uid}">
                    <div class="accordion-body">
                                                    <f:cObject data="{contentUid:content.data.uid, colPos:content.data.colPos}" typoscriptObjectPath="lib.dynamicContent_acc"/>

                    </div>
                </div>
                </div>
                </f:for>
            </f:for>
    </f:for>
</div>

非常感谢

Answer 1

通常，当您为前端渲染手风琴时，手风琴要么完全关闭，要么第一个项目处于活动状态。因此，除非您确实在每次点击时重新加载整个页面，否则检查活动项目是没有用的，希望您不会这样做。

如果您想让第一个项目处于活动状态，只需使用

f:for

viewhelper 的迭代来确定第一个项目并在那里设置活动类和适当的 aria 控件。

代码中似乎错误的另一件事是

{record.data.uid}

，因为任何循环中都没有

record

可用，只有

row

、

column

和

content

或可用的原始父数据在

data

。