自己写了一个展开和收起的多更能型的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 页面输出值
Nov 30 Javascript
IE8 中使用加速器(Activities)
May 14 Javascript
JS面向对象编程浅析
Aug 28 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
Node.js API详解之 V8模块用法实例分析
Jun 05 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自动生成月历代码
2006/10/09 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
脚本收藏iframe
2006/07/21 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
港湾网络笔试题
2014/04/19 面试题
五一家具促销方案
2014/01/10 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
运动会稿件100字
2014/09/24 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
个人政治思想总结
2015/03/05 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android