自己写了一个展开和收起的多更能型的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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
js数组依据下标删除元素
Apr 14 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
redux-saga 初识和使用
Mar 10 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 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输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
jquery 上下滚动广告
2009/06/17 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python对列表排序的方法实例分析
2015/05/16 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python反射的用法实例分析
2018/02/11 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
python 以16进制打印输出的方法
2018/07/09 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python实现元素等待代码实例
2019/11/11 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
服务宗旨标语
2014/07/01 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
春节超市活动方案
2014/08/14 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
2014年政协工作总结
2014/12/09 职场文书
第一节英语课开场白
2015/06/01 职场文书