Layui select 下拉面板点击空白处关闭是内置交互约定，非 bug；可通过移除 document 点击监听或改用 layui.dropdown 并设 hideOnBlur: false 来禁用该行为。

layui select 下拉面板为什么点空白处会关闭

Layui 的 select 默认使用原生 click 事件监听 document，只要点击区域不在 .layui-form-select 容器内，就会触发自动关闭逻辑。这不是 bug，而是 Layui 内置的交互约定——它把“点击非下拉区域”等同于“用户放弃选择”，所以强制收起面板。

禁用默认关闭行为：改写 dropdown 关闭监听

原生 select 没提供配置项关掉这个行为，必须绕过它。核心思路是：在下拉展开后，移除 Layui 绑定的全局 document 点击关闭监听，并自行控制关闭时机。

• 监听 form.on('select(filter)') 或点击标题时，先调用 layui.dropdown.close() 清除可能残留的旧下拉实例
• 手动触发下拉显示后（例如模拟点击 .layui-select-title），立即执行：

  $(document).off('click.layuiSelectClose');

• 后续如需手动关闭，用 layui.dropdown.close(id) 或直接操作 DOM：

  $('.layui-anim').addClass('layui-hide');

• 注意：Layui v2.8+ 的 dropdown 模块有独立 ID 管理，若你用 layui.dropdown.render() 替代原生 select，可直接设 trigger: 'click' + show: true + 不传 hide 回调，就能彻底脱离默认关闭链

更稳妥的替代方案：用 layui.dropdown 自定义下拉

如果你的需求本质是“点击即展开、不点任何地方都不关”，那原生 select 就不是合适载体。直接弃用它，改用 layui.dropdown 手动控制：

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

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

下载

• HTML 中不写 ，只放一个按钮或文字容器：

  <button id="customSelectBtn">请选择</button>

• JS 中绑定：

  layui.dropdown.render({<br>  elem: '#customSelectBtn',<br>  data: [{name: '启用', value: '1'}, {name: '禁用', value: '0'}],<br>  trigger: 'click',<br>  show: true,<br>  hideOnBlur: false // 关键：禁用失焦关闭<br>});

• hideOnBlur: false 是 v2.9+ 新增配置，明确告诉 Layui “不要因为点空白就关”，比 hack document 事件更干净
• 如果需要同步到真实表单字段，点击菜单项时手动赋值：

  $('#realInput').val(item.value);

容易被忽略的细节

即使关掉了自动关闭，仍要注意两个隐形陷阱：

• 键盘操作（如按 ESC）仍会触发默认关闭，hideOnBlur: false 不影响这个行为；如需拦截，得监听 keydown 并 event.preventDefault() 当前处于下拉激活态的元素
• 页面存在多个 layui.dropdown 实例时，layui.dropdown.close() 不带参数会关闭全部——务必用返回的 id 精确控制，否则点一个下拉，其他全收