推荐使用 CSS 清除 outline：为折叠容器添加 class（如 no-outline-collapse），再设置 .no-outline-collapse .layui-colla-item a:focus { outline: none; }，既消除虚线框又保留键盘可访问性。

点击 layui 折叠面板（layui-collapse）标题时出现的虚线框，是浏览器对可聚焦元素（如 、）触发 :focus 状态的默认视觉提示。layui 的折叠标题默认使用 标签并设置了 tabindex="0"，因此会响应键盘焦点和鼠标点击，从而显示 outline。

直接禁用 focus outline（推荐）

最简洁有效的方式是在 CSS 中针对性清除折叠标题的 outline：

• 给折叠容器加一个自定义 class，比如 no-outline-collapse
• 在全局样式中写：

.no-outline-collapse .layui-colla-item a:focus { outline: none; }

这样既不影响键盘导航逻辑（仍可 tab 切换），又消除了视觉干扰。注意不要全局写 a:focus { outline: none }，否则会损害可访问性。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

替换标签结构（更彻底）

如果项目对可访问性要求不高，或确认无需键盘操作，可将标题从 改为语义更中性的

或

，并手动绑定 click 事件：

• HTML 中不依赖 layui 自动渲染，手写结构：

  

    

标题文本

    

内容区

  

• JS 中初始化并绑定：

$('.colla-title').on('click', function() {
  $(this).next('.layui-colla-content').slideToggle();
});

此时无 tabindex、无 ，自然不会触发 outline。

补充说明

layui 本身未提供关闭该 outline 的配置项，也不建议用 JS 在 click 后调用 blur()——这会中断键盘用户的操作流，且对屏幕阅读器不友好。纯 CSS 方案最安全、轻量、符合规范。