Layui折叠面板通过.layui-collapse容器与lay-accordion属性实现手风琴效果；需严格保持HTML结构，避免嵌套冗余div，动态添加后须调用layui.element.render('collapse')刷新，且仅响应一次时需重新渲染。

在 Layui 折叠面板（）中，默认展开某一项，关键不是靠 JS 调用或事件监听，而是直接在 HTML 结构中标记对应项为“已展开”状态——即给它的 <code class=" layui-colla-content> 添加 <pre class="brush:php;toolbar:false;"> 类。&lt;/p&gt; &lt;H3&gt;指定某一项默认展开的写法&lt;/H3&gt; &lt;p&gt;只需在目标面板的 &lt;code class=&quot;layui-colla-content</pre> 元素上加上 <pre class="brush:php;toolbar:false;"> 类即可。Layui 渲染时会识别该类并保持其可见。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;只对一个 &lt;code class=&quot;layui-colla-item</pre> 生效，不影响其他项 <li>无需调用 <code>layui.element.render('collapse')，静态写入即生效

若同时开启 lay-accordion（手风琴模式），默认展开项仍有效，且其他项自动收起

HTML 示例（默认展开第二项）

注意：只有第二项的 含 <code class=" layui-show>：

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

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

下载

<div class="layui-collapse" lay-accordion>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">标题一</h2>
    <div class="layui-colla-content">内容一</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">标题二</h2>
    <div class="layui-colla-content layui-show">内容二（默认展开）</div>
  </div>
</div>

动态场景下如何默认展开某项

如果面板是 JS 动态生成（如通过循环渲染），可在拼接 HTML 时判断索引或 ID，为符合条件的项注入

：</p>
<ul>
  <li>例如：遍历数组，当 <code>item.id === 'target-2'

时，在其 content 标签里加上

</li>
  <li>渲染后需手动刷新折叠模块：<code>layui.element.render('collapse')

，否则新添加的

 不会被识别</li>
  <li>切勿在 <code class="layui-colla-content

外层额外包裹 div，否则会导致

 失效</li>
</ul>

<H3>常见失效原因排查</H3>
<p>若加了 <code class="layui-show

却没展开，检查以下几点：

• 是否误写成 或 <code class=" layui-shown>（必须严格为 <pre class="brush:php;toolbar:false;">）&lt;/li&gt; &lt;li&gt;是否把 &lt;code class=&quot;layui-show&quot;</pre> 加在了 <code class="layui-colla-title 或外层容器上（只对 有效）
• 是否开启了 lay-accordion 却给多个项都加了

  （手风琴模式下仅第一个生效）</li>
    <li>动态插入后是否遗漏了 <code>layui.element.render('collapse')