先来看看效果： 具体的功能是： 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); } };

　　推荐阅读

　　javascript重复绑定事件造成的后果说明

最近在修改百度地图开源的东西，想把里面耦合在一起的代码给拆分出来。拆解之后，发现了一些坑爹的问题。逻辑上没有问题的情况下，该出现的效果没有出现。然后就以为是代码哪里写得不对了，就一直找啊找的。在调试>>>详细阅读

本文标题：自己写了一个展开和收起的多更能型的js效果

地址：http://www.17bianji.com/kaifa2/JS/22284.html

 1/2    1