Layui搜索区域展开后控件失灵，因初始化时display:none导致渲染跳过；应初始不隐藏、JS后调hide()，展开后立即form.render()，并用事件委托绑定按钮。
直接用 display: none 切换搜索区域显隐，不重绘表单控件，会导致 select、checkbox 等失灵——这是最常踩的坑。
为什么点击“展开”后下拉框点不动或样式错乱
Layui 表单控件（如 select）初始化时会检测父容器是否可见。若搜索区域初始为 display: none，Layui 会跳过渲染，后续即使显示出来，也还是原生控件。
- 初始化时让搜索区域短暂可见：加
style="visibility: hidden; position: absolute;"占位，等layui.form.render()执行完再真正隐藏 - 更推荐做法：HTML 中不写
display: none，JS 初始化后立刻调用$('#search-area').hide() - 展开后必须立即调用
layui.form.render('select')或layui.form.render()，否则控件无交互
如何实现带过渡动画的收起/展开
用 max-height + overflow: hidden 配合 CSS 过渡，比 slideToggle 更可控，且能兼容 Layui 渲染时机。
- 给搜索区域加唯一 ID，例如
<div id="search-panel"> - CSS 定义：
#search-panel { transition: max-height .3s ease-out; overflow: hidden; } - 初始状态设
max-height: 0；展开时设为panel.scrollHeight + 'px'（首次展开后缓存该值） - 在
max-height设置完成后，用setTimeout(() => layui.form.render(), 16)补全渲染，避免下拉面板错位
按钮事件绑定和状态管理怎么写才不翻车
别用 $(btn).click(() => {...}) 直接绑，DOM 重绘或局部更新后事件就丢了；也别靠按钮文字判断状态（比如 “展开”/“收起”），中文切换或空格变动就崩。
- 用事件委托：
$(document).on('click', '#toggle-search', handler) - 用
data-属性存状态：btn.dataset.expanded = 'true'，读取时用btn.dataset.expanded === 'true' - 收起前，对可能残留浮层的组件做清理：比如有
laydate，先调laydate.render().close() - 如果搜索区含
textarea或input，收起前手动触发.blur()，防止焦点残留干扰
复杂点在于：Layui 不是纯 CSS 框架，它的表单依赖 DOM 可见性与渲染时序；动画、显隐、重绘三者必须串行执行，顺序错了就白忙活。最容易被忽略的是——收起前没清浮层、展开后没补渲染、状态存在 DOM 属性里却忘了同步更新。
