自己写了一个展开和收起的多更能型的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技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
3种vue组件的书写形式
Nov 29 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 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
关于php mvc开发模式的感想
2011/06/28 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
php简单分页类实现方法
2015/02/26 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
Vuex 入门教程
2018/01/10 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python线程详解
2015/06/24 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
公务员总结性个人自我评价
2013/12/05 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
反腐倡廉标语
2014/06/24 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
高中物理教学反思
2016/02/19 职场文书
Python基础详解之描述符
2021/04/28 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android