Layui 的 element 模块不支持按数据状态动态控制折叠箭头显隐，需通过服务端过滤不渲染无子项的 .layui-colla-content，或用 CSS 隐藏空内容项的箭头图标。
Layui 的 element 模块本身不提供「按数据状态动态控制折叠箭头显隐」的能力。它只负责自动初始化 .layui-nav-child 或 .layui-collapse-item 这类结构，并绑定点击展开/收起行为；箭头图标是否显示，完全由 HTML 结构是否存在子内容决定，而非 JS 逻辑判断。
所以，隐藏“无子项”面板上的下拉箭头，核心思路是：不让它渲染箭头，或用 CSS 把它藏掉。以下是两种稳妥、通用的做法：
✅ 方法一：服务端/数据层过滤，不渲染无子项的折叠容器（推荐）
Layui 折叠面板（.layui-collapse）中，每个可折叠项必须包含 .layui-colla-content 才会被识别为可折叠项。如果某一项确实没有子内容，就根本不要给它套 .layui-colla-content 标签。
<!-- ✅ 有子项 → 正常渲染，带箭头 -->
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">用户管理</h2>
<div class="layui-colla-content">...</div>
</div>
<!-- ❌ 无子项 → 不写 .layui-colla-content，就不会被识别为可折叠项，自然无箭头 -->
<div class="layui-colla-item">
<h2 class="layui-colla-title">系统日志</h2>
<!-- 没有 .layui-colla-content，Layui 不会添加箭头，也不会绑定展开事件 -->
</div>
</div>⚠️ 注意：Layui 会自动为所有
.layui-colla-item中存在.layui-colla-content的项添加箭头和交互。没内容就不加——这是最干净、零 CSS 干预的方式。
✅ 方法二：CSS 隐藏空面板的箭头（适用于动态数据或无法改结构时）
如果因数据异步加载、权限控制等原因，必须保留 .layui-colla-content 标签（哪怕内部为空），可用 CSS 隐藏其箭头：
/* 隐藏所有折叠项标题右侧的箭头 */
.layui-colla-item > .layui-colla-title::after {
display: none;
}
/* 或更精准：只隐藏内容为空的项的箭头（需配合 JS 标记） */
.layui-colla-item.empty > .layui-colla-title::after {
display: none;
}然后在 JS 初始化后补个判断逻辑：
// 初始化 collapse 后执行
layui.use('element', function(){
const element = layui.element;
element.render('collapse');
// 遍历所有折叠项，检查内容是否为空，打标记
document.querySelectorAll('.layui-colla-item').forEach(item => {
const content = item.querySelector('.layui-colla-content');
if (!content || content.innerHTML.trim() === '') {
item.classList.add('empty');
}
});
});❌ 不要做的
- 试图调用
element.collapse()或类似方法去“禁用”某个项：Layui 没有单个项的 hide/show API； - 在
.layui-colla-title里手动写<i class="layui-icon"></i>再删掉：破坏了模块自动渲染机制，可能导致事件失效； - 用
display: none隐藏整个.layui-colla-content：Layui 仍会渲染箭头并绑定点击，用户点空白区域仍会触发无效果 toggle。
只要结构上不提供可折叠内容，或者用轻量 CSS + 简单 JS 标记控制，就能让无子项的折叠面板彻底“静默”——不显示箭头、不响应点击、不干扰视觉。
