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

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

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

先來看看效果：

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

復制代碼代碼如下:

 
<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代碼

復制代碼代碼如下:

 
/** 
* 展開通知和收起通知<br> 
* 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){ 
//本身對象(現(xiàn)在點擊的和上一步操作的對象是同一個) 
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){ 
//新對象id，上一次點擊對象record 
var older_name = $("#a_"+record).attr("name"); 
//上一次點擊的對象 
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"); 
} 
//新對象 
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); 
} 
}; 

您可能感興趣的文章:

javaScript 利用閉包模擬對象的私有屬性
JavaScript缺少塊級作用域，沒有private修飾符，但它具有函數(shù)作用域。作用域的好處是內(nèi)部函數(shù)可以訪問它們的外部函數(shù)的參數(shù)和變量（除了this和argument
2011-12-12
JS實現(xiàn)單擊輸入框彈出選擇框效果完整實例
這篇文章主要介紹了JS實現(xiàn)單擊輸入框彈出選擇框效果的方法,涉及JavaScript響應鼠標事件動態(tài)操作頁面元素與相關屬性的實現(xiàn)技巧,需要的朋友可以參考下
2015-12-12
canvas雪花效果核心代碼分享
本文主要分享了canvas實現(xiàn)雪花效果的核心代碼，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
微信小程序點餐系統(tǒng)開發(fā)常見問題匯總
這篇文章主要介紹了微信小程序點餐系統(tǒng)開發(fā)常見問題匯總,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-08-08
微信小程序web-view無法打開該頁面不支持打開的解決方法
小程序現(xiàn)在日漸成熟,功能也越來越強大,我們今天來一起看看小程序跳轉(zhuǎn)的問題,下面這篇文章主要給大家介紹了關于微信小程序web-view無法打開該頁面不支持打開的解決方法,需要的朋友可以參考下
2023-01-01
javascript兩段代碼,兩個小技巧
話說以前我轉(zhuǎn)過一片文章,講的是 JavaScript中||和&&的妙用, 下面是一些優(yōu)化寫法。
2010-02-02
javascript 掃雷游戲
最近心血來潮，用JavaScript實現(xiàn)了Windows自帶的掃雷游戲。當前只實現(xiàn)了基本功能，還有一個缺點就是只能在IE上正常運行，估計是事件沒有處理好。
2009-05-05
javascript 面向?qū)ο蠹夹g基礎教程
看了很多介紹javascript面向?qū)ο蠹夹g的文章,很暈.為什么?不是因為寫得不好,而是因為太深奧.
2009-12-12
DOM操作原生js 的bug,使用jQuery 可以消除的解決方法
下面小編就為大家?guī)硪黄狣OM操作原生js 的bug,使用jQuery 可以消除的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
JavaScript設計模式之構(gòu)造器模式(生成器模式)定義與用法實例分析
這篇文章主要介紹了JavaScript設計模式之構(gòu)造器模式(生成器模式)定義與用法,結(jié)合實例形式分析了javascript構(gòu)造器模式的概念、原理、與工廠模式的區(qū)別以及相關使用方法,需要的朋友可以參考下
2018-07-07