自己写了一个展开和收起的多更能型的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实现颜色渐变的方法
Oct 30 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 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
优化PHP代码的53条建议
2008/03/27 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
Python基础知识点 初识Python.md
2019/05/14 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
测绘工程个人的自我评价
2013/11/10 职场文书
小学教师管理制度
2014/01/18 职场文书
食堂个人先进事迹
2014/01/22 职场文书
护士求职信范文
2014/05/24 职场文书
美食节目策划方案
2014/05/31 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
优秀教师个人材料
2014/12/15 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android