jQuery点击图片实现表格的隐藏与显示

1、定义好一个图片标签

 业务订单号

2、具体的隐藏与展开操作

function slideToggle(id) {
	var src = $("#img_" + id).attr("src");
	if (src.indexOf('up.png') > -1) {//如果要检索的字符串值没有出现，则该方法返回 -1。
		$("#img_" + id).attr( {
			src : "${ctx}/css/images/down.png",
			alt : "展开"
		});
		$("#tr_" + id).attr( {
			title : "展开"
		});
		$("#" + id).slideToggle(500);
	} else if (src.indexOf('down.png') > -1) {
		$("#img_" + id).attr( {
			src : "${ctx}/css/images/up.png",
			alt : "隐藏"
		});
		$("#tr_" + id).attr( {
			title : "隐藏"
		});
		$("#" + id).slideToggle(500);
	} else if (src.indexOf('+.png') > -1) {
		$("#img_" + id).attr( {
			src : "${ctx}/css/images/-.png"
		});
		//$("#tr_"+id).attr({title:"隐藏"});
		$("#tr_drawer2").slideToggle();
		$("#tr_drawer3").slideToggle();
	} else if (src.indexOf('-.png') > -1) {
		$("#img_" + id).attr( {
			src : "${ctx}/css/images/+.png"
		});
		//$("#tr_"+id).attr({title:"展开"});
		$("#tr_drawer2").slideToggle();
		$("#tr_drawer3").slideToggle();
	}

}

调用此函数即可实现表格的显示与隐藏

注： slideToggle函数通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。