JS实现下拉框中当鼠标离开下拉菜单时立即隐藏菜单
一、需求描述
在填报数据的时候，通过下拉框选择数据，用户希望当在点击下拉框弹出选项面板后，放弃当前单元格编辑，鼠标离开下拉面板时，自动隐藏掉下拉面板，能让旁边的单元格不被遮挡。系统默认是必须点击其它地方，才能隐藏面板！
二、实现方案
通过给按钮设置初始化JS事件来实现这个功能
三、示例详解
选中按钮：右键==》按钮设置==》事件编辑==》初始化后 添加JS代码如下：
var self = this;
window.tryCollapse = function() {
if (window.needCollapse) {
if (self.isExpanded()) {
self.collapse();
}
window.needCollapse = false;
}
}
$('.view-container').children().bind('mouseout', function(e) {
window.needCollapse = true;
setTimeout(function() {
window.tryCollapse();
}, 100);
});
var btn = $('.fr-trigger-btn-up', this.element);
var view = this.$view;
btn.bind('click', function() {
if (!self.isExpanded()) {
return;
}
setTimeout(function() {
$('.fr-combo-list-item', view).bind('mouseover', function() {
window.needCollapse = false;
}); //mouseout（鼠标移开）时，隐藏当前下拉框待选部分
}, 100);
});
四、效果预览
实现了鼠标移开下拉面板时隐藏下拉面板，如图：
附件列表
主题： 二次开发