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年第一届&quot;两天微电影大赛&quot;完美收官后，时隔一年， 在中国电视艺术家协会支持下，上海戏剧学院和新西兰华语媒体再度联合主办的&quot;2013年第二届两天微电影大赛&quot; 近日在上海正式启动，此次他们另辟蹊径，面对海内外所有电影爱好者，旨在开启微电影时代的全民化。" />

        <input name="short" type="hidden" value="腾讯娱乐讯 2012年第一届&quot;两天微电影大赛&quot;完美收官..." />

    </li>

    <li>

        腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官...<span class="ico" onclick="toggleWords(this); return false;">展开</span>

        <input name="long" type="hidden" value="腾讯娱乐讯 2012年第一届&quot;两天微电影大赛&quot;完美收官后，时隔一年， 在中国电视艺术家协会支持下，上海戏剧学院和新西兰华语媒体再度联合主办的&quot;2013年第二届两天微电影大赛&quot; 近日在上海正式启动，此次他们另辟蹊径，面对海内外所有电影爱好者，旨在开启微电影时代的全民化。" />

        <input name="short" type="hidden" value="腾讯娱乐讯 2012年第一届&quot;两天微电影大赛&quot;完美收官..." />

    </li>

    <li>

        腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官...<span class="ico" onclick="toggleWords(this); return false;">展开</span>

        <input name="long" type="hidden" value="腾讯娱乐讯 2012年第一届&quot;两天微电影大赛&quot;完美收官后，时隔一年， 在中国电视艺术家协会支持下，上海戏剧学院和新西兰华语媒体再度联合主办的&quot;2013年第二届两天微电影大赛&quot; 近日在上海正式启动，此次他们另辟蹊径，面对海内外所有电影爱好者，旨在开启微电影时代的全民化。" />

        <input name="short" type="hidden" value="腾讯娱乐讯 2012年第一届&quot;两天微电影大赛&quot;完美收官..." />

    </li>

    <li>

        腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官...<span class="ico" onclick="toggleWords(this); return false;">展开</span>

        <input name="long" type="hidden" value="腾讯娱乐讯 2012年第一届&quot;两天微电影大赛&quot;完美收官后，时隔一年， 在中国电视艺术家协会支持下，上海戏剧学院和新西兰华语媒体再度联合主办的&quot;2013年第二届两天微电影大赛&quot; 近日在上海正式启动，此次他们另辟蹊径，面对海内外所有电影爱好者，旨在开启微电影时代的全民化。" />

        <input name="short" type="hidden" value="腾讯娱乐讯 2012年第一届&quot;两天微电影大赛&quot;完美收官..." />

    </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/ ...

随机推荐

漫谈js自定义事件、DOM/伪DOM自定义事件
一.说明.引言我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
编译Opencv的GPU，利用CUDA加速
首先检查自己的机器是否支持,否则都是白搭(仅仅有NVIDIA的显卡才支持.可在设备管理器中查看) 假设不用GPU.能够直接官网下载预编译好的库环境: 1 VS2013 2 Opencv2.4.9 3 ...
Android 手电筒源代码
近期因为公司须要,做了一个手电筒,事实上手电筒原理非常easy,就是调用照相机的闪光灯,控制闪光灯的开关,就能够实现手电筒的效果, 强调一下,代码中一定要注意在结束的时候对闪光灯进行释放,否则就会导致 ...
报错：对一个或多个实体的验证失败。有关详细信息，请参阅“EntityValidationErrors”属性
当使用Entity Framework,并且把领域模型的某个字段设置成不能为null,但在保存.更新的时候,如果领域模型的该字段为null了,就会报如上错误. 解决方法:给领域模型不能为null的字段 ...
c#中何时使用Empty()和DefalutIfEmpty()
在项目中,当我们想获取IEnumerable<T>集合的时候,这个集合有可能是null.但通常的做法是返回一个空的集合. 假设有这样一个场景:当商店不营业时,返回一个空的IEnumerab ...
[转载] C-MEX程序编写
原作者,胡荣春 2006-10-11 1 MEX文件简介在MATLAB中可调用的C或Fortran语言程序称为MEX文件.MATLAB可以直接把MEX文件视为它的内建函数进行调用.MEX文件是动态 ...
聊聊高并发（十四）理解Java中的管程，条件队列，Condition以及实现一个堵塞队列
这篇里面有一些主要的概念,理解概念是件有意义的事情,仅仅有理解概念才干在面对详细问题的时候找到正确的解决思路.先看一下管程的概念第一次在书上看到管程这个中文名称认为非常迷糊,管程究竟是个什么东东,于 ...
[Android Pro] 控制硬加速 hardwareAccelerated 在3.0才有的
从Android3.0 (API level11)开始,Android的2D显示管道被被设计得更加支持硬加速了．硬加速使用GPU承担了所有在View的canvas上执行的绘制操作．启用硬加速最简单的 ...
csv2txt.cpp
#include <iostream> #include <fstream.h> #include <windows.h> #include <iomanip ...
深入分析JavaWeb Item7 -- HttpServletResponse详解
Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象即然代表请求和响应,那我们要 ...

js 展开/收起效果

js 展开/收起效果的更多相关文章

随机推荐

热门专题