自己写了一个展开和收起的多更能型的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 相关文章推荐
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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
星际RPG字典
2020/03/04 星际争霸
PHP实现获取域名的方法小结
2014/11/05 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
基于vue2实现上拉加载功能
2017/11/28 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
django 自定义用户user模型的三种方法
2014/11/18 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
keras.layer.input()用法说明
2020/06/16 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
护士个人简历自荐信
2013/10/18 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS