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>

效果圖:

  

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM