本文介绍一种基于jQuery的列表项展开与收起交互方案。核心逻辑为互斥显示：同一时刻仅允许一个列表项处于展开状态。当点击某项展开时，自动隐藏当前已展开项并重置其按钮状态；点击已展开项的收起按钮则仅隐藏该项。代码通过维护当前激活项ID及状态标识，动态切换内容可见性与按钮文本，适用于新闻列表、通知栏等场景。
展开与收起交互逻辑说明
首先展示实现效果。
具体功能包括：
页面规则：任意时刻最多仅有一个列表项保持内容完全展开状态。
交互逻辑一：若当前列表项已处于展开状态，用户点击其对应的“收起”按钮时，该项内容将隐藏。
交互逻辑二：若当前列表项已处于展开状态，用户点击其他列表项的“展开”按钮时，当前列表项的内容将自动隐藏。
同时，被点击的其他列表项内容将完全显示，其按钮文字由“展开”变为“收起”。
=================================================
部分代码展示：
=================================================
复制代码操作
HTML列表结构实现
HTML结构代码如下：
<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>JavaScript代码
复制代码操作
JavaScript交互逻辑实现
JavaScript实现代码如下：
/**
* 展开通知和收起通知<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);
}
};