自己写了一个展开和收起的多更能型的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 相关文章推荐
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
destoon数据库表说明汇总
2014/07/15 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
javascript的函数
2007/01/31 Javascript
Javascript 布尔型分析
2008/12/22 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
web前端开发也需要日志
2010/12/09 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
python实现代理服务功能实例
2013/11/15 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python中的作用域规则详解
2015/01/30 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
继电保护工岗位职责
2014/01/05 职场文书
春游踏青活动方案
2014/08/14 职场文书
刑事上诉状范文
2015/05/22 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS