先来看看效果:
具体的功能是:
1.页面上面最多只有一个是显示全部内容的。
2.当自己处于全部显示的时候,点击自己的收起,自己收起。
3.当自己处于全部显示的时候,点击其他的展开是,自己内容隐藏,原来的"收起"变为"展开"
而被点击的选项则内容全部显示,"展开"变为"收起"
=================================================
部分代码:
=================================================
1 <tbody>
2 <input type="hidden" id="record" value="${qr.count }">
3 <c:forEach items="${qr.results }" var="info" varStatus="index">
4 <tr id="user_info_${info.id }">
5 <td class="userWrapper_right_collect">
6 <p class="ml20 clearfix mb10">
7 <strong class="ex_green_fg mr10 fl">${info.sender }</strong> <span id="span_content_${info.id }" ${index.count eq 1 ? "class='fl w500'" : "class='fl symbleDot w500'" }>${info.content }</span>
8 </p> <a href="javascript:void(0)" onclick="cancelThisInfo(${info.id});" class="fr mr20 ex_green_fg">删除</a> <span class="fr ml5 mr5">|</span> <a href="javascript:void(0)" class="fr ex_green_fg" id="a_${info.id }" name="${index.count eq 1 ? '1' : '0' }" onclick="infoContent('${info.id}');"> <c:if test="${index.count eq 1 }" var="up">
9 <span id="span_${info.id }" class="ex_arrow ex_arrowUp mr5"> </span>收起
10 </c:if> <c:if test="${!up }">
11 <span class="ex_arrow ex_arrowDown mr5"> </span>展开
12 </c:if>
13 </a> <span class="fr mr10 gray"><fmt:formatDate value="${info.createTime}" pattern="yyyy-MM-dd HH:mm:ss" /></span>
14 </td>
15 </tr>
16 </c:forEach>
17 </tbody>
18
js代码
1 /**
2 * 展开通知和收起通知<br>
3 * 1.点击某一个id的展开功能时候,首先所有的关闭,再展开id通知,展开id时候,class='fl w500' class="ex_arrow ex_arrowUp mr5" 收起
4 * 2.点击收起某一个id时候,class='fl symbleDot w500' class="ex_arrow ex_arrowDown mr5" 展开
5 * @date 2013-3-5
6 * @author xhw
7 *
8 * @param id
9 */
10 function infoContent(id) {
11 var a_name = $("#a_" + id).attr("name");
12 var record = $("#record").val();
13
14 if(id == null || id == ""){
15 alert("请求出错!");
16 }else if(id == record){
17 //本身对象(现在点击的和上一步操作的对象是同一个)
18 if(a_name == "0"){
19 $("#span_content_" + id).attr("class","fl w500");
20 $("#a_" + id).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起");
21 $("#a_" + id).attr("name", "1");
22 }else if(a_name == "1"){
23 $("#span_content_" + id).attr("class","fl symbleDot w500");
24 $("#a_" + id).html("<span class='ex_arrow ex_arrowDown mr5'></span>展开");
25 $("#a_" + id).attr("name", "0");
26 //$("#record").attr("value",id);
27 }
28 }else if(id != record){
29 //新对象id,上一次点击对象record
30 var older_name = $("#a_"+record).attr("name");
31 //上一次点击的对象
32 if(older_name == "0"){
33 $("#span_content_" + record).attr("class","fl w500");
34 $("#a_" + record).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起");
35 $("#a_" + record).attr("name", "1");
36 }else if(older_name == "1"){
37 $("#span_content_" + record).attr("class","fl symbleDot w500");
38 $("#a_" + record).html("<span class='ex_arrow ex_arrowDown mr5'></span>展开");
39 $("#a_" + record).attr("name", "0");
40 }
41 //新对象
42 if(a_name == "0"){
43 $("#span_content_" + id).attr("class","fl w500");
44 $("#a_" + id).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起");
45 $("#a_" + id).attr("name", "1");
46 }else if(a_name == "1"){
47 $("#span_content_" + id).attr("class","fl symbleDot w500");
48 $("#a_" + id).html("<span class='ex_arrow ex_arrowDown mr5'></span>展开");
49 $("#a_" + id).attr("name", "0");
50 }
51 $("#record").attr("value",id);
52 }
53 };