自己写了一个展开和收起的多更能型的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 自动填写表单的实现方法
Apr 09 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
discuz安全提问算法
2007/06/06 PHP
php session 检测和注销
2009/03/16 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
python tkinter组件使用详解
2019/09/16 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
研究生毕业鉴定
2014/01/29 职场文书
运动会邀请函范文
2014/01/31 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
2015年电工工作总结
2015/04/10 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL