自己写了一个展开和收起的多更能型的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实现随机返回数组的一个元素
Aug 13 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
VUE实现日历组件功能
Mar 13 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP和.net中des加解密的实现方法
2013/02/27 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
基于jQuery的表格操作插件
2010/04/22 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
jquery foreach使用示例
2013/09/12 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python中logging库的使用总结
2017/10/18 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Python 复平面绘图实例
2019/11/21 Python
python十进制转二进制的详解
2020/02/07 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
以下的初始化有什么区别
2013/12/16 面试题
金榜题名主持词
2015/07/02 职场文书
赞助商致辞
2015/07/30 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server