如何为Moodle 4.0的Flexsections插件移动端实现Ionic 5手风琴效果？

1. 调整Mustache模板结构 #

在Flexsections的移动端Mustache模板中，区分主章节与子章节，给主章节添加触发按钮，子章节包裹在可折叠容器内：

{{#sections}}
    {{#ismainsection}}
        <div class="flexsection-main ion-card ion-margin">
            <div class="ion-card-header section-header" id="section-{{id}}">
                <div class="ion-card-title">
                    {{name}}
                </div>
                <button class="section-toggle ion-button ion-button-clear ion-align-self-center" data-section="{{id}}">
                    <ion-icon name="chevron-down"></ion-icon>
                </button>
            </div>
            <div class="flexsection-subsections ion-card-content" id="subsections-{{id}}" hidden>
                {{#subsections}}
                    <div class="subsection-item ion-padding ion-border-bottom">
                        <h3>{{name}}</h3>
                        <!-- 子章节内容渲染 -->
                        {{#modules}}
                            <div class="module-item ion-margin-top">
                                {{name}}
                            </div>
                        {{/modules}}
                    </div>
                {{/subsections}}
            </div>
        </div>
    {{/ismainsection}}
    {{^ismainsection}}
        <!-- 非主章节（若需单独展示可保留此处逻辑） -->
    {{/ismainsection}}
{{/sections}}

2. 添加Ionic适配的CSS样式 #

添加折叠过渡效果与按钮样式，适配Ionic 5的视觉风格：

.flexsection-subsections {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.flexsection-subsections.expanded {
    max-height: 2000px; /* 根据实际内容高度调整 */
    opacity: 1;
}

.section-toggle ion-icon {
    transition: transform 0.3s ease;
}

.section-toggle.expanded ion-icon {
    transform: rotate(180deg);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

3. 原生JavaScript实现折叠逻辑 #

编写纯原生JS代码，监听按钮点击事件，切换折叠状态：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有折叠触发按钮
    const toggleButtons = document.querySelectorAll('.section-toggle');
    
    toggleButtons.forEach(button => {
        button.addEventListener('click', function() {
            const sectionId = this.getAttribute('data-section');
            const subContainer = document.getElementById(`subsections-${sectionId}`);
            const icon = this.querySelector('ion-icon');
            
            // 切换展开/折叠状态
            subContainer.classList.toggle('expanded');
            this.classList.toggle('expanded');
            
            // 同步更新容器状态与图标
            if (subContainer.classList.contains('expanded')) {
                subContainer.removeAttribute('hidden');
                icon.setAttribute('name', 'chevron-up');
            } else {
                subContainer.setAttribute('hidden', '');
                icon.setAttribute('name', 'chevron-down');
            }
        });
    });
});

关键说明 #

• 模板通过ismainsection标识区分主/子章节，确保仅主章节带有折叠触发按钮
• CSS使用max-height结合过渡实现平滑折叠动画，避免display: none导致无过渡效果
• 原生JS仅调用DOM API，完全符合Moodle移动端插件对原生代码的要求
• 复用Ionic 5组件类（如ion-card、ion-button），保持与App整体风格一致

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