<!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 展开/收起效果的更多相关文章

  1. Adroid 展开收起效果实现

    Layout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  2. javascript 特效实现(1)——展开选项和收起效果

    知识点:javascript事件:判断当前展开收起状态:延迟执行setTimeout方法. 1.简单的展开和收起效果: 1.1 静态结构HTML代码分析 body包含最外层的div id=" ...

  3. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  4. css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

    HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...

  5. vue.js 实现点击展开收起动画

    最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...

  6. 不使用字体图标和图片，只使用css如何做出展开收起的效果

    <i class="iconArrow" :class="[ littleNavState === item.meta.id ? 'arrowOpen' : '' ...

  7. HTML-003-模拟IDE代码展开收起功能简单示例

    当先我们在日常的编程开发工作中使用编程工具(例如 Eclipse.Sublime 等等)都有相应的代码折叠展开功能,如下图所示,极大的方便了我们的编码工作.

  8. jquery 展开关闭效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起

    Dom与Event简洁代码实现文本展开收起 Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

随机推荐

  1. C#引用类型转换的几种方式

    本篇体验引用类型转换:子类转换成父类,父类转换成子类,以及不是子父级关系类之间的转换. □ 隐式转换:子类转换成父类 public class Animal { public int _age; pu ...

  2. C#程序集系列08,设置程序集版本

    区别一个程序集,不仅仅是程序集名称,还包括程序集版本.程序集公匙.程序集文化等,本篇体验通过界面和编码设置程序集版本. □ 通过Visual Studio设置程序集版本 →右键项目,选择"属 ...

  3. CLR查找和加载程序集 z

    C#开发者在开发WinForm程序.Asp.Net Web(MVC)程序等,不可避免的在项目中引用许多第三方的DLL程序集, 编译后引用的dll都放在根目录下.以我个人作品 AutoProject S ...

  4. [翻译] 用 ObjectiveSugar 扩展NSArray NSDictionary NSSet NSNumber

    source - https://github.com/supermarin/ObjectiveSugar Look like a girl, act like a lady, think like ...

  5. 对JVM还一知半解

    对JVM还一知半解?这篇文章让你彻底搞定JVM 摘要: 对于Java开发者来说,想把自身能力提升到更高层次,某些JVM相关知识应该是优先级很高的.比如说GC策略,JVM调优. 就我在工作中遇到的情况来 ...

  6. bzoj 1565 [NOI2009]植物大战僵尸 解题报告

    1565: [NOI2009]植物大战僵尸 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2161  Solved: 1000[Submit][Stat ...

  7. 3D有向包围盒与球体碰撞的算法

    之前发的小游戏滚蛋躲方块中,用它来判断球体与立方体是否发生了碰撞. http://www.cnblogs.com/WhyEngine/p/3350012.html 现在发布下该算法: 有向包围盒OBB ...

  8. css美化、优化、合并工具推荐

    其实很多时候,我们写完css规则之后,我们思考的无非就是3件事情: 验证 美化 压缩 当然无论是我们自己做这样的工具还是寻找一些比较好的成熟的工具,都有几个期望: 是否支持一些ie下的hack方式: ...

  9. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  10. WPF Converter 使用复杂参数的方法

    Step 1在WPF的C#代码文件中给定义复杂类型的变量,并给其赋值:Sample code: List<User>lsUser=....Setp 2在 C#代码对应的XAML 中将此复杂 ...