如何在Moodle课程中通过HTML实现Spoiler折叠展开功能？

一、能否直接嵌入JS与CSS？ #

可以直接在课程HTML中嵌入，但需要注意Moodle的安全过滤机制：

• 普通用户默认可能没有权限嵌入这类代码，管理员需要调整文本编辑器的过滤规则（比如Atto编辑器的"允许的HTML"设置），或者给对应角色开放"使用未过滤的HTML"权限。
• 嵌入的代码不会被Moodle强制清除，只要权限和过滤规则允许，就能正常生效。

二、具体实现方法 #

1. 单课程临时实现（直接嵌入代码） #

在课程内容的HTML编辑模式下，粘贴以下代码：

首先是样式（放在HTML的<style>标签内）：

.spoiler-box {
    margin: 1rem 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}
.spoiler-title {
    padding: 0.8rem 1rem;
    background: #f8f9fa;
    cursor: pointer;
    font-weight: 500;
}
.spoiler-content {
    padding: 1rem;
    display: none;
}

然后是折叠模块的HTML结构：

<div class="spoiler-box">
    <div class="spoiler-title">点击展开隐藏内容</div>
    <div class="spoiler-content">
        这里放用户需要隐藏的内容，支持任意HTML元素（文字、图片、表格等）
    </div>
</div>

最后是交互脚本（放在<script>标签内）：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.spoiler-title').forEach(title => {
        title.addEventListener('click', function() {
            const content = this.nextElementSibling;
            content.style.display = content.style.display === 'block' ? 'none' : 'block';
        });
    });
});

2. 全局复用方案（主题/插件） #

如果多个课程都需要折叠模块，推荐用以下方式统一管理：

• 主题集成：在当前使用的主题文件夹中，找到additional.css和javascript.js文件，分别添加上述CSS和JS代码。之后用户只需在课程内容中插入折叠模块的HTML结构即可，无需重复写样式和脚本。
• 文本过滤器插件：开发一个简单的Moodle过滤器插件，识别自定义标记（比如[spoiler=标题]内容[/spoiler]），自动转换为折叠模块的HTML结构。用户无需写HTML，直接用标记语法即可生成折叠模块，体验更友好。

三、关键注意事项 #

• 权限配置：管理员需在「站点管理」→「用户」→「权限」中，给对应角色（比如教师）分配「使用未过滤的HTML」权限，否则嵌入的JS/CSS会被编辑器过滤。
• 浏览器兼容性：确保JS代码使用Moodle支持的浏览器兼容API，避免使用ES6+特性而未做兼容处理。
• 性能优化：全局使用时，尽量将JS代码合并到主题的脚本文件中，减少页面请求。

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