报表自带的参数面板默认是显示的，如果想隐藏，需要点击参数面板下面的小三角图标，再次显示需要再次点击，这样比较麻烦，于是有客户想在查看内容时自动隐藏参数面板，在鼠标移动在上面时再次恢复参数面板，效果如下图所示：

通过添加加载结束事件来实现此功能。

$('.parameter-container-collapseimg-down').click();//点击参数面板下拉按钮，即显示参数面板

$(".parameter-container-collapseimg-up").click()//点击参数面板收缩按钮，即隐藏参数面板

3.1 示例一：鼠标移动显示或隐藏参数面板

1）打开模板：%FR_HOME%\webroot\WEB-INF\reportlets\GettingStarted.cpt。

2）点击菜单模板>模板Web属性>分页预览设置，选择为该模板单独设置，添加加载结束事件，如下图所示：

JavaScript代码如下：

$('.fr-horizontalboxlayout').bind('mouseover',function(){ 
	$('.parameter-container-collapseimg-down').click();//鼠标移动到上方时，显示参数面板 
}); 
$('.content-container').bind('mouseover',function(){
	$('.parameter-container-collapseimg-up').click();//鼠标进入到主内容页面时，隐藏参数面板 
})

3）保存后，点击分页预览，点击查询按钮，效果如描述中所述，查看内容时自动隐藏参数面板，在鼠标移动在上面时再次恢复参数面板。

3.2 示例二：鼠标点击显示或隐藏参数面板

如果不需要鼠标经过主内容，而是点击主内容才隐藏参数面板，在菜单模板>模板Web属性>分页预览设置，选择为该模板单独设置，添加加载结束事件，如下图所示：

JavaScript代码如下：

$('.fr-horizontalboxlayout').bind('click',function(){ 
	$('.parameter-container-collapseimg-down').click(); 
});
$('.content-container').bind('click',function(){ 
	$('.parameter-container-collapseimg-up').click(); 
})

保存后，点击分页预览，点击查询按钮，在主内容点击鼠标左键，隐藏参数面板，将鼠标移动到参数面板上点击鼠标左键，显示参数面板。

3.3 示例三：预览自动隐藏参数面板 

如果想实现模板预览即隐藏参数面板，选择参数面板，在右侧的控件设置中选择para控件，在事件中添加初始化后事件，如下图所示：

JavaScript代码如下：

setTimeout(function() { 
	$('.parameter-container-collapseimg-up').trigger("click"); 
//点击打开报表100ms后自动收起参数面板 
}, 100);

保存后，点击分页预览，模板加载100ms后自动隐藏参数面板。

4.1 PC端预览效果

1）示例一：鼠标移动显示或隐藏参数面板

2）示例二：鼠标点击显示或隐藏参数面板

3）示例三：预览自动隐藏参数面板

4.2 移动端预览效果

示例一和示例二不支持移动端，示例三预览自动隐藏参数面板的JavaScript也不支持移动端，但是当参数面板中设置了不勾选点击查询前不显示报表内容时，移动端预览报表时默认是不会显示参数面板的。

1）示例一

模板效果在线查看请点击：JS实现参数面板自动隐藏与显示-示例一.cpt

已完成的模板，可参见：%FR_HOME%\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例一.cpt

点击下载模板

2）示例二

模板效果在线查看请点击：JS实现参数面板自动隐藏与显示-示例二.cpt

已完成的模板，可参见：%FR_HOME%\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例二.cpt

点击下载模板

3）示例三

模板效果在线查看请点击：JS实现参数面板自动隐藏与显示-示例三.cpt

已完成的模板，可参见：%FR_HOME%\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\09-JS实现参数面板自动隐藏与显示-示例三.cpt

点击下载模板