先來看看效果:
具體的功能是:
1.頁面上面最多只有一個是顯示全部內容的。
2.當自己處於全部顯示的時候,點選自己的收起,自己收起。
3.當自己處於全部顯示的時候,點擊其他的展開是,自己內容隱藏,原來的"收起"變為"展開"
而被點擊的選項則內容全部顯示,"展開"變成"收起"
========================================= ========
部分代碼:
=========================== ======================
${info.sender } ${info.content }
刪除 | 收起 展開
|
js程式碼
/**
* 展開通知與收起通知
* 1.點選某一個id的展開功能時候,首先所有的關閉,再展開id通知,展開id時候,class='fl w500' class= "ex_arrow ex_arrowUp mr5" 收起
* 2.點擊收起某一個id時候,class='fl symbleDot w500' class="ex_arrow ex_arrowDown mr5" 展開
* @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("收起");
$("#a_" id).attr("name", "1");
}else if(a_name == "1"){
$("#span_content_" id).attr( "class","fl symbleDot w500");
$("#a_" id).html("展開");
$(" #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("收起");
$("#a_" record).attr("name", "1");
} else if(older_name == "1"){
$("#span_content_" record).attr("class","fl symbleDot w500");
$("#a_" record).html( "展開");
$("#a_" record).attr("name", "0");
}
/ /新物件
if(a_name == "0"){
$("#span_content_" id).attr("class","fl w500");
$("#a_" id ).html("收起");
$("#a_" id).attr("name", "1");
}else if(a_name == "1"){
$("#span_content_" id).attr("class","fl symbleDot w500");
$("#a_" id).html ("展開");
$("#a_" id).attr("name", "0");
}
$("#record").attr("value",id);
}
};