自己写了一个展开和收起的多更能型的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的Validation插件中Remote验证的中文问题
Jul 26 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
原生js实现轮播图特效
May 04 Javascript
js实现缓动动画
Nov 25 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获取http请求的头信息实现步骤
2012/12/16 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
python conda操作方法
2019/09/11 Python
pytorch forward两个参数实例
2020/01/17 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
优秀员工个人的自我评价
2013/11/29 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
2014年学生会工作总结
2014/11/07 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python