…… >> 填报预览JS实例 >>下拉框控件实现鼠标离开下拉面板时隐藏面板

下拉框控件实现鼠标离开下拉面板时隐藏面板

1.问题描述
      在填报数据的时候，通过下拉框选择数据，用户希望，当在点击下拉框弹出下拉面板后，放弃当前单元格编辑，鼠标离开下拉面板时，隐藏掉下拉面板，能让旁边的单元格不被遮挡。
      目前必须点击其余地方，才能隐藏面板
      
2.解决办法


     给需要实现这个功能的下拉框控件，添加初始化后事件，代码如下


     

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.         });
    
26.     }, 100);
    
27. });
    

复制代码

           $('.view-container').children().bind('mouseout', function(e) {
    window.needCollapse = true;
    setTimeout(function() {
        window.tryCollapse();
    }, 100);
});   这段代码为核心  mouseout（鼠标移开）时，隐藏当前下拉框待选项部分


如此，即可实现鼠标移开下拉面板时隐藏下拉面板

      

RT