TYPO3 11.x中Gridelements手风琴组件默认激活项配置问题

问题描述 #

我正在使用TYPO3 11.x搭配bootstrap_package和gridelements。为制作包含多种内容类型的手风琴，我集成了带有数据处理（dataprocessing）的gridelements。目前手风琴基本可用，但无法实现选中项的激活变量功能：初始加载时所有项均处于展开状态，点击任意手风琴按钮后所有项都会关闭，之后点击单个按钮可单独打开对应项。我想集成类似<f:variable name="activeElement" value="{data.pi_flexform.default_element}" />的代码，请问当前模板存在什么问题？

当前模板的核心问题 #

• 激活变量未声明：直接使用{activeElement}但未提前定义，导致所有条件判断失效，按钮默认无collapsed类，初始全部展开。
• 变量引用错误：循环中误用不存在的record.data.uid，应该使用当前循环项的content.data.uid作为唯一标识。
• 折叠面板类缺失：折叠内容容器未设置collapse基础类，也未根据激活状态添加show类，Bootstrap无法识别并控制折叠状态。
• 事件冲突冗余：按钮内部嵌套<a>标签并重复绑定折叠事件，点击时触发两次动作，导致异常关闭行为。
• 属性格式不一致：data-parent属性存在拼写错误（如#accordion{data.uid}缺少连字符），导致面板与手风琴容器关联失效。

修复后的完整模板代码 #

<div class="container">
    <!-- 声明激活变量，读取Flexform配置的默认展开项UID -->
    <f:variable name="activeElement" value="{data.pi_flexform.default_element}" />
    <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}-{content.data.uid}">
                            <button class="accordion-button{f:if(condition: activeElement != content.data.uid, then:' collapsed')}" 
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#accordion-{data.uid}-{content.data.uid}"
                                    data-bs-parent="#accordion-{data.uid}"
                                    aria-expanded="{f:if(condition: activeElement == content.data.uid, then: 'true', else: 'false')}"
                                    aria-controls="accordion-{data.uid}-{content.data.uid}">
                                {content.data.header}
                            </button>
                        </h4>
                        
                        <div id="accordion-{data.uid}-{content.data.uid}" 
                             class="collapse{f:if(condition: activeElement == content.data.uid, then:' show')}" 
                             aria-labelledby="accordion-heading-{data.uid}-{content.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>
</div>

关键修复说明 #

• 新增f:variable声明activeElement，从Flexform中读取预设的默认激活项UID。
• 统一使用content.data.uid作为当前项的唯一标识，修复变量引用错误。
• 给折叠面板添加collapse基础类，并根据激活状态动态添加show类，控制初始展开/折叠状态。
• 移除按钮内部冗余的<a>标签，避免事件冲突导致的异常行为。
• 统一所有关联属性的命名格式，确保data-bs-parent、id、aria-controls等属性一一对应。
• 简化标题输出逻辑，直接使用{content.data.header}（TYPO3内容元素标题默认存在，无需额外判断）。

内容的提问来源于stack exchange，提问作者Ralho