自己寫了一個展開和收起的js效果...分享給大家

先來看看效果：

具體的功能是：

1.頁面上面最多只有一個是顯示全部內容的。

2.當自己處於全部顯示的時候，點擊自己的收起，自己收起。

3.當自己處於全部顯示的時候，點擊其他的展開是，自己內容隱藏，原來的"收起"變為"展開"

而被點擊的選項則內容全部顯示，"展開"變為"收起"

=================================================

部分代碼：

=================================================

        <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){
        //本身對象(現在點擊的和上一步操作的對象是同一個)
        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);
    }
};