自己写了一个展开和收起的多更能型的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 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
js 自动播放的实例代码
Nov 19 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
老生常谈ES6中的类
Jul 31 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 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代码
2016/08/08 PHP
php实现socket推送技术的示例
2017/12/20 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
js使用cookie记录用户名的方法
2015/11/26 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python数据化运营的重要意义
2019/11/25 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
为什么说python适合写爬虫
2020/06/11 Python
python的flask框架难学吗
2020/07/31 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
园艺师求职信
2014/03/10 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
Python语言中的数据类型-序列
2022/02/24 Python