要实现点击折叠面板外部区域时自动收起所有展开的面板，需监听 document 点击事件，用 e.target.closest() 判断是否点在带 layui-collapse-external 类的面板内或 layui-colla-title 标题上；若都不是，则调用 collapse.render().change([]) 收起全部（Layui 2.8+），旧版需手动移除类并隐藏内容区。
要实现点击折叠面板外部区域时自动收起所有展开的面板，关键在于监听全局点击事件，并判断点击目标是否在折叠面板内部。Layui 的折叠面板（layui.collapse）本身不提供“点击外部收起全部”的内置方法，需手动增强。
监听 document 点击并排除面板区域
给每个折叠面板容器添加唯一 class（如 layui-collapse-external），然后在点击 document 时检查事件目标是否在其内部或其子元素中：
- 使用
e.target.closest('.layui-collapse-external')判断是否点在面板内 - 如果不是，则调用
layui.collapse.render().change([])清空所有展开项（Layui 2.8+ 支持传空数组收起全部） - 注意避免重复绑定，建议在
layui.use回调中一次性绑定
兼容旧版 Layui（2.7 及以下）的写法
旧版 change() 不支持空数组，需手动遍历所有面板项并逐个收起：
- 先用
$('.layui-collapse-item')获取所有折叠项 - 对每个项移除
layui-colla-itemed类，并隐藏其内容区（.layui-colla-content） - 同时确保图标状态同步更新（如将
↓改回→）
防止点击触发器按钮时误收起
折叠面板的标题栏（.layui-colla-title）是交互热点，点击它应正常展开/收起，不能被外部点击逻辑拦截：
- 在 document 的 click 事件中，用
e.target.classList.contains('layui-colla-title')或e.target.closest('.layui-colla-title')提前 return - 也可用
stopPropagation()在标题点击事件里阻止冒泡（更稳妥）
完整示例代码（Layui 2.8+）
在 collapse 初始化后加入：
layui.use(['collapse'], function(){
var collapse = layui.collapse;
// 初始化折叠面板
collapse.render({
elem: '#demo',
trigger: 'click',
showIcon: true,
change: function (index, data) {
console.log('当前展开项索引：', index);
}
});
// 点击外部收起全部
$(document).on('click', function(e) {
if ($(e.target).closest('.layui-collapse-external').length === 0 &&
!$(e.target).closest('.layui-colla-title').length) {
collapse.render().change([]);
}
});
});
记得给你的 同时加上 class="layui-collapse-external"。
