js 展开/收起效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ font-size:14px;}
.ico{ background:url(http://mat1.gtimg.com/www/icon/favicon2.ico) no-repeat center ; cursor:pointer; display:inline-block; text-indent:-999px; width:28px;}
.closeTag{background:#F60; cursor:pointer;} ul{ width:500px; border:1px solid #FC6; list-style:none;}
ul li{ margin:15px; line-height:30px; text-indent:30px;} </style>
</head>
<script>
//toggle点评
function toggleWords(obj)
{
var childs = obj.parentNode.childNodes;
var longstr,shortstr,textnode; for(var i=0,len=childs.length;i<len;i++)
{http://www.baidu.com/img/bdlogo.gif
//需要操作的文本节点
if(childs[i].nodeType == 3 && textnode == undefined)
{
textnode = childs[i];
}
//详细信息
if(childs[i].nodeType == 1 && childs[i].name == 'long')
{
longstr = childs[i].value;
} //简短信息
if(childs[i].nodeType == 1 && childs[i].name == 'short')
{
shortstr = childs[i].value;
}
} if(longstr == undefined || shortstr == undefined || textnode == undefined)
{
return ;
} if(obj.innerHTML == '展开')
{
textnode.nodeValue = longstr;
obj.innerHTML = '收起';
obj.className = 'ico closeTag';
}else{
textnode.nodeValue = shortstr;
obj.innerHTML = '展开';
obj.className = 'ico';
}
}
</script> <body>
<dd >
<ul>
<li>
腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官...<span class="ico" onclick="toggleWords(this); return false;">展开</span>
<input name="long" type="hidden" value="腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官后，时隔一年， 在中国电视艺术家协会支持下，上海戏剧学院和新西兰华语媒体再度联合主办的"2013年第二届两天微电影大赛" 近日在上海正式启动，此次他们另辟蹊径，面对海内外所有电影爱好者，旨在开启微电影时代的全民化。" />
<input name="short" type="hidden" value="腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官..." />
</li>
<li>
腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官...<span class="ico" onclick="toggleWords(this); return false;">展开</span>
<input name="long" type="hidden" value="腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官后，时隔一年， 在中国电视艺术家协会支持下，上海戏剧学院和新西兰华语媒体再度联合主办的"2013年第二届两天微电影大赛" 近日在上海正式启动，此次他们另辟蹊径，面对海内外所有电影爱好者，旨在开启微电影时代的全民化。" />
<input name="short" type="hidden" value="腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官..." />
</li>
<li>
腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官...<span class="ico" onclick="toggleWords(this); return false;">展开</span>
<input name="long" type="hidden" value="腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官后，时隔一年， 在中国电视艺术家协会支持下，上海戏剧学院和新西兰华语媒体再度联合主办的"2013年第二届两天微电影大赛" 近日在上海正式启动，此次他们另辟蹊径，面对海内外所有电影爱好者，旨在开启微电影时代的全民化。" />
<input name="short" type="hidden" value="腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官..." />
</li>
<li>
腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官...<span class="ico" onclick="toggleWords(this); return false;">展开</span>
<input name="long" type="hidden" value="腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官后，时隔一年， 在中国电视艺术家协会支持下，上海戏剧学院和新西兰华语媒体再度联合主办的"2013年第二届两天微电影大赛" 近日在上海正式启动，此次他们另辟蹊径，面对海内外所有电影爱好者，旨在开启微电影时代的全民化。" />
<input name="short" type="hidden" value="腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官..." />
</li>
</ul>
</dd>
</body>
</html>
效果图：
js 展开/收起效果的更多相关文章
- Adroid 展开收起效果实现
Layout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...
- javascript 特效实现(1)——展开选项和收起效果
知识点:javascript事件:判断当前展开收起状态:延迟执行setTimeout方法. 1.简单的展开和收起效果: 1.1 静态结构HTML代码分析 body包含最外层的div id=" ...
- jq与原生js实现收起展开效果
jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...
- css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果
HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...
- vue.js 实现点击展开收起动画
最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...
- 不使用字体图标和图片，只使用css如何做出展开收起的效果
<i class="iconArrow" :class="[ littleNavState === item.meta.id ? 'arrowOpen' : '' ...
- HTML-003-模拟IDE代码展开收起功能简单示例
当先我们在日常的编程开发工作中使用编程工具(例如 Eclipse.Sublime 等等)都有相应的代码折叠展开功能,如下图所示,极大的方便了我们的编码工作.
- jquery 展开关闭效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起
Dom与Event简洁代码实现文本展开收起 Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C/ ...
随机推荐
- MVC无限级分类01,分层架构,引入缓存，完成领域模型与视图模型的映射
本系列将使用zTree来创建.编辑关于品牌.车系.车型的无限级分类,使用datagrid显示,源码在github.先上最终效果: datagrid显示所有记录.分页,提供添加.修改.删除按钮,并提供简 ...
- jQuery闭包之浅见,从面向对象角度来理解
本篇的标题虽然是"jQuery闭包之浅见...",但实际上本篇涉及的多半是javascript"闭包"相关内容,之所以写这个标题,完全是因为自己平常用jQuer ...
- MVC借助MvcSiteMapProvider实现站点地图
使用MvcSiteMapProvider可轻松实现站点地图,俗称"面包屑".如图: 通过NuGet,输入MvcSiteMapProvider搜索,并安装. 在Mvc.sitemap ...
- 26复杂类型比较,使用Compare .NET objects组件
关于比较对象,在"06判等对象是否相等"中大致可以总结为: 关于比较方法: ● 实例方法Equals(object obj)既可以比较值类型,也可以比较引用类型 ● 静态方法E ...
- js 日期相差的天数
function DateDiff(sDate1, sDate2){ //sDate1和sDate2是2006-12-18格式 var aDate, oDate1, oDate2, iDays aDa ...
- Android系列教程(十六) 在电脑上装Android
[软件准备] 1.LiveAndroid v0.3 liveCD [点击下载] 2.VirtualBox 3.0.4 [点击下载] [图片安装流程] 主要安装思路为:通过vir ...
- 异常：javax.el.PropertyNotFoundException: Property 'id' not found on ..........
在后台action中查询数据库返回的UserInfo对象后 将uDisplayName传递到jsp中,jsp中用${userInfo.uDisplayName}接收值时报错: 异常:javax.el. ...
- mysqld_safe脚本执行的基本流程
mysqld_safe脚本执行的基本流程:1.查找basedir和ledir.2.查找datadir和my.cnf.3.对my.cnf做一些检查,具体检查哪些选项请看附件中的注释.4.解析my.cnf ...
- C预编译, 预处理, C/C++头文件, 编译控制，
在所有的预处理指令中,#Pragma 指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma指令对每个编译器给出了一个方法,在保持与C和C++语言完全兼容的 ...
- Go 语言简介（上）— 语法
周末天气不好,只能宅在家里,于是就顺便看了一下Go语言,觉得比较有意思,所以写篇文章介绍一下.我想写一篇你可以在乘坐地铁或公交车上下班时就可以初步了解一门语言的文章.所以,下面的文章主要是以代码和注释 ...