快捷導(dǎo)航

自己寫了一個(gè)展開和收起的多更能型的js效果

更新時(shí)間：2013年03月05日 17:14:23 作者：

展開和收起這樣的效果想必大家早就眼熟了吧，利用閑暇時(shí)間用js寫了一個(gè)具體功能：當(dāng)自己處于全部顯示的時(shí)候，點(diǎn)擊自己的收起，自己收起等等感興趣的你可以參考下哈

先來看看效果：

具體的功能是：
1.頁面上面最多只有一個(gè)是顯示全部內(nèi)容的。
2.當(dāng)自己處于全部顯示的時(shí)候，點(diǎn)擊自己的收起，自己收起。
3.當(dāng)自己處于全部顯示的時(shí)候，點(diǎn)擊其他的展開是，自己內(nèi)容隱藏，原來的"收起"變?yōu)?展開"
而被點(diǎn)擊的選項(xiàng)則內(nèi)容全部顯示，"展開"變?yōu)?收起"
=================================================
部分代碼：
=================================================

復(fù)制代碼代碼如下:

 
<tbody> 
<input type="hidden" id="record" value="${qr.count }"> 
<c:forEach items="${qr.results }" var="info" varStatus="index"> 
<tr id="user_info_${info.id }"> 
<td class="userWrapper_right_collect"> 
<p class="ml20 clearfix mb10"> 
<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> 
</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"> 
<span id="span_${info.id }" class="ex_arrow ex_arrowUp mr5"> </span>收起 
</c:if> <c:if test="${!up }"> 
<span class="ex_arrow ex_arrowDown mr5"> </span>展開 
</c:if> 
</a> <span class="fr mr10 gray"><fmt:formatDate value="${info.createTime}" pattern="yyyy-MM-dd HH:mm:ss" /></span> 
</td> 
</tr> 
</c:forEach> 
</tbody> 

js代碼

復(fù)制代碼代碼如下:

 
/** 
* 展開通知和收起通知<br> 
* 1.點(diǎn)擊某一個(gè)id的展開功能時(shí)候，首先所有的關(guān)閉，再展開id通知，展開id時(shí)候，class='fl w500' class="ex_arrow ex_arrowUp mr5" 收起 
* 2.點(diǎn)擊收起某一個(gè)id時(shí)候，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("請(qǐng)求出錯(cuò)！"); 
}else if(id == record){ 
//本身對(duì)象(現(xiàn)在點(diǎn)擊的和上一步操作的對(duì)象是同一個(gè)) 
if(a_name == "0"){ 
$("#span_content_" + id).attr("class","fl w500"); 
$("#a_" + id).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起"); 
$("#a_" + id).attr("name", "1"); 
}else if(a_name == "1"){ 
$("#span_content_" + id).attr("class","fl symbleDot w500"); 
$("#a_" + id).html("<span class='ex_arrow ex_arrowDown mr5'></span>展開"); 
$("#a_" + id).attr("name", "0"); 
//$("#record").attr("value",id); 
} 
}else if(id != record){ 
//新對(duì)象id，上一次點(diǎn)擊對(duì)象record 
var older_name = $("#a_"+record).attr("name"); 
//上一次點(diǎn)擊的對(duì)象 
if(older_name == "0"){ 
$("#span_content_" + record).attr("class","fl w500"); 
$("#a_" + record).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起"); 
$("#a_" + record).attr("name", "1"); 
}else if(older_name == "1"){ 
$("#span_content_" + record).attr("class","fl symbleDot w500"); 
$("#a_" + record).html("<span class='ex_arrow ex_arrowDown mr5'></span>展開"); 
$("#a_" + record).attr("name", "0"); 
} 
//新對(duì)象 
if(a_name == "0"){ 
$("#span_content_" + id).attr("class","fl w500"); 
$("#a_" + id).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起"); 
$("#a_" + id).attr("name", "1"); 
}else if(a_name == "1"){ 
$("#span_content_" + id).attr("class","fl symbleDot w500"); 
$("#a_" + id).html("<span class='ex_arrow ex_arrowDown mr5'></span>展開"); 
$("#a_" + id).attr("name", "0"); 
} 
$("#record").attr("value",id); 
} 
}; 