自己写了一个展开和收起的多更能型的js效果


Posted in Javascript onMarch 05, 2013

先来看看效果:
自己写了一个展开和收起的多更能型的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); 
} 
};
Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 #Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 #Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 #Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 #Javascript
js日期时间补零的小例子
Mar 05 #Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 #Javascript
html超链接打开窗口大小的方法
Mar 05 #Javascript
You might like
供参考的 php 学习提高路线分享
2011/10/23 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python安装twisted的问题解析
2018/08/21 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
电脑租赁公司创业计划书
2014/01/08 职场文书
房屋改造计划书
2014/01/10 职场文书
学雷锋月活动总结
2014/04/25 职场文书
小学安全汇报材料
2014/08/14 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
离职信范本
2015/06/23 职场文书
2019暑假学生安全口号
2019/06/27 职场文书