JS实现下拉框中当鼠标离开下拉菜单时立即隐藏菜单

1. 概述
1.1 问题描述

在填报数据的时候，通过下拉框选择数据，用户希望当在点击下拉框弹出选项面板后，放弃当前单元格编辑，鼠标离开下拉面板时，自动隐藏掉下拉面板，能让旁边的单元格不被遮挡。系统默认是必须点击其它地方，才能隐藏面板！

1.2 实现思路

通过给按钮设置初始化 JS 事件来实现当鼠标离开下拉面板时，自动隐藏掉下拉面板。

2. 示例
2.1 操作步骤

设置好模板，选中按钮添加“初始化后事件”，如下图所示：

JS 代码如下：

1. var self = this;
   
2. window.tryCollapse = function() {
   
3.     if (window.needCollapse) {
   
4.         if (self.isExpanded()) {
   
5.             self.collapse();
   
6.         }
   
7.         window.needCollapse = false;
   
8.     }
   
9. }
   
10. $('.view-container').children().bind('mouseout', function(e) {
    
11.     window.needCollapse = true;
    
12.     setTimeout(function() {
    
13.         window.tryCollapse();
    
14.     }, 100);
    
15. });
    
16. var btn = $('.fr-trigger-btn-up', this.element);
    
17. var view = this.$view;
    
18. btn.bind('click', function() {
    
19.     if (!self.isExpanded()) {
    
20.         return;
    
21.     }
    
22.     setTimeout(function() {
    
23.         $('.fr-combo-list-item', view).bind('mouseover', function() {
    
24.             window.needCollapse = false;
    
25.         });  //mouseout（鼠标移开）时，隐藏当前下拉框待选部分
    
26.     }, 100);
    
27. });

复制代码

2.2 预览效果

保存模板，选择填报预览，实现效果下图所示：

注：此 JS 不支持移动端使用

3. 模板下载

模板效果在线查看请点击：JS 实现下拉框中当鼠标离开下拉菜单时立即隐藏菜单.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\28-JS实现下拉框中当鼠标离开下拉菜单时立即隐藏菜单.cpt

点击下载模板：28-JS实现下拉框中当鼠标离开下拉菜单时立即隐藏菜单.cpt

只适应cpt