JS实现参数面板自动隐藏与显示
1. 场景描述
报表自带的参数面板默认是显示的，如果想隐藏，需要点击参数面板下面的小三角图标，再次显示需要再次点击，这样比较麻烦，于是有客户想在查看内容时自动隐藏参数面板，在鼠标移动在上面时再次恢复参数面板，效果如下图所示：
2. 实现思路
3. 解决方案
js代码如下：
$('.fr-horizontalboxlayout').bind('mouseover',function(){
$('.parameter-container-collapseimg-down').click();//鼠标移动到上方时，显示参数面板
});
$('.content-container').bind('mouseover',function(){
$('.parameter-container-collapseimg-up').click();//鼠标进入到主内容页面时，隐藏参数面板
})
保存后，点击分页预览，效果如描述中所述，查看内容时自动隐藏参数面板，在鼠标移动在上面时再次恢复参数面板。
注：如果不需要鼠标经过主内容，而是点击才隐藏参数面板，可以直接用下面代码就行
$('.fr-horizontalboxlayout').bind('mouseover',function(){
$('.parameter-container-collapseimg-down').click();
});
$('.content-container').bind('click',function(){
$('.parameter-container-collapseimg-up').click();
})
4. 其他
如果想实现初始化后隐藏参数面板，js代码如下：
setTimeout(function(){
$('.parameter-container-collapseimg-up').trigger("click");
},100);
//点击打开报表100ms后自动收起参数面板
附件列表
主题： 二次开发
标签：
已验证