先来看看效果：
具体的功能是：
1.页面上面最多只有一个是显示全部内容的。
2.当自己处于全部显示的时候，点击自己的收起，自己收起。
3.当自己处于全部显示的时候，点击其他的展开是，自己内容隐藏，原来的"收起"变为"展开"
而被点击的选项则内容全部显示，"展开"变为"收起"
=================================================
部分代码：
=================================================
复制代码 代码如下:
<tbody>
<input type="hidden" value="${qr.count }">
<c:forEach items="${qr.results }" var="info" varStatus="index">
<tr>
<td>
<p>
<strong>${info.sender }</strong> <span ${index.count eq 1 ? "class='fl w500'" : "class='fl symbleDot w500'" }>${info.content }</span>
</p> <a href="javascript:void(0)">删除</a> <span>|</span> <a href="javascript:void(0)"> <c:if test="${index.count eq 1 }" var="up">
<span> </span>收起
</c:if> <c:if test="${!up }">
<span> </span>展开
</c:if>
</a> <span><fmt:formatDate value="${info.createTime}" pattern="yyyy-MM-dd HH:mm:ss" /></span>
</td>
</tr>
</c:forEach>
</tbody>
js代码
复制代码 代码如下:
/**
* 展开通知和收起通知<br>
* 1.点击某一个id的展开功能时候，首先所有的关闭，再展开id通知，展开id时候，class='fl w500' 收起
* 2.点击收起某一个id时候，class='fl symbleDot w500' 展开
* @date 2013-3-5
* @author xhw
*
* @param id
*/
function infoContent(id) {
var a_name = $("#a_" + id).attr("name");
var record = $("#record").val();
if(id == null || id == ""){
alert("请求出错！");
}else if(id == record){
//本身对象(现在点击的和上一步操作的对象是同一个)
if(a_name == "0"){
$("#span_content_" + id).attr("class","fl w500");
$("#a_" + id).html("<span></span>收起");
$("#a_" + id).attr("name", "1");
}else if(a_name == "1"){
$("#span_content_" + id).attr("class","fl symbleDot w500");
$("#a_" + id).html("<span></span>展开");
$("#a_" + id).attr("name", "0");
//$("#record").attr("value",id);
}
}else if(id != record){
//新对象id，上一次点击对象record
var older_name = $("#a_"+record).attr("name");
//上一次点击的对象
if(older_name == "0"){
$("#span_content_" + record).attr("class","fl w500");
$("#a_" + record).html("<span></span>收起");
$("#a_" + record).attr("name", "1");
}else if(older_name == "1"){
$("#span_content_" + record).attr("class","fl symbleDot w500");
$("#a_" + record).html("<span></span>展开");
$("#a_" + record).attr("name", "0");
}
//新对象
if(a_name == "0"){
$("#span_content_" + id).attr("class","fl w500");
$("#a_" + id).html("<span></span>收起");
$("#a_" + id).attr("name", "1");
}else if(a_name == "1"){
$("#span_content_" + id).attr("class","fl symbleDot w500");
$("#a_" + id).html("<span></span>展开");
$("#a_" + id).attr("name", "0");
}
$("#record").attr("value",id);
}
};
您可能感兴趣的文章: