확장 및 축소_javascript 기술의 보다 유연한 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="ml20clearfix 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});" ex_green_fg">삭제</a> &lt ;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"> 접기
</c: if> <c:if test="${!up }">
<span class="ex_arrow ex_arrowDown mr5">펼치기
</c:if>
</a> <span class="fr mr10 grey"><fmt:formatDate value="${info.createTime}" 패턴="yyyy-MM- dd HH:mm:ss" /&gt ;</span>
</td>
</tr>
</c:forEach>
</tbody>

js 코드

코드 복사 코드는 다음과 같습니다.

/**
* 알림 확장 및 알림 축소
* 1. 특정 ID의 확장 기능을 클릭하면 먼저 모두 닫은 다음 ID 알림을 확장합니다. ' class ="ex_arrow ex_arrowUp mr5" Collapse
* 2. ID를 축소하려면 class='fl symbleDot w500' class="ex_arrow ex_arrowDown mr5" Expand
* @date 2013-3-5
* @author xhw
*
* @param id
*/
function infoContent(id) {
var a_name = $("#a_" id).attr("name")
var 레코드 = $("#record").val();
if(id == null || id == ""){
alert("요청 오류!");else if( id == 레코드){
//객체 자체(지금 클릭한 객체는 이전 단계에서 조작한 객체와 동일합니다)
if(a_name == "0"){
$(" #span_content_" id ).attr("class","fl w500");
$("#a_" id).html("<span class='ex_arrow ex_arrowUp mr5'></span> Collapse") ;
$("#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, 마지막으로 클릭한 개체 레코드
var old_name = $("#a_" Record).attr("name");
//마지막으로 클릭한 개체
if(older_name == "0"){
$("#span_content_" Record).attr("class","fl w500")
$ ( "#a_" 레코드).html("<span class='ex_arrow ex_arrowUp mr5'></span>Collapse")
$("#a_" 레코드).attr("이름", "1");
}else if(older_name == "1"){
$("#span_content_" 레코드).attr("class","fl SymbleDot w500")
$( "#a_" 레코드).html("<span class='ex_arrow ex_arrowDown mr5'></span>Expand")
$("#a_" 레코드).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>Collapse")
$("#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>Expand")
$("#a_" id). ("이름", "0");
}
$("#record").attr("값",id)
}
};