自己写了一个展开和收起的多更能型的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实现的日期操作类DateTime函数代码
Mar 16 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
JS实现数组去重的11种方法总结
Apr 04 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
用header 发送cookie的php代码
2007/03/16 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python处理multipart/form-data的请求方法
2018/12/26 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
如何获取Python简单for循环索引
2019/11/21 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
拖鞋店创业计划书
2014/01/15 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
摄影助理岗位职责
2014/02/07 职场文书
2014最新实习证明模板
2014/10/02 职场文书
营销与策划实训报告
2014/11/05 职场文书
婚姻出轨保证书
2015/05/08 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android