自己写了一个展开和收起的多更能型的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键盘事件介绍
Jan 31 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
vue项目实现分页效果
Mar 24 Vue.js
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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
PHP面向对象精要总结
2014/11/07 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
PHP数组相关函数汇总
2015/03/24 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
jQuery之字体大小的设置方法
2014/02/27 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Django 限制访问频率的思路详解
2019/12/24 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
大二学生学习个人自我评价
2014/01/19 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
师德师风演讲稿
2014/05/05 职场文书
监督检查工作方案
2014/05/28 职场文书
企业职业病防治方案
2014/05/29 职场文书
尊师重教演讲稿
2014/09/04 职场文书
公司合并协议书范本
2014/09/30 职场文书
公司周年庆典标语
2014/10/07 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
Nginx跨域问题解析与解决
2022/08/05 Servers
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers