自己写了一个展开和收起的多更能型的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 相关文章推荐
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
js实现全选和全不选功能
Jul 28 Javascript
vue实现抽屉弹窗效果
Nov 15 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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python读取网页内容的方法
2015/07/30 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
什么是网络协议
2016/04/07 面试题
简述安装Slackware Linux系统的过程
2012/05/08 面试题
自荐书模板
2013/12/19 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
店面销售职位的职责
2014/03/09 职场文书
相亲大会策划方案
2014/06/05 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
毕业设计论文评语
2014/12/31 职场文书
小学中队活动总结
2015/05/11 职场文书
2015初中团委工作总结
2015/07/28 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
java设计模式--原型模式详解
2021/07/21 Java/Android