在页面中实现内容的展开和收缩

很多网页都需要有这样的特性：某些内容可以进行收缩和展开。当然，是希望在客户端用脚本的方式来实现的。

点击“隐藏”按钮之后，我们希望第一个部分的内容隐藏起来，同时按钮的文本也要改变。

我们一般会这样做

<!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>
<script type="text/javascript" language="javascript">
function Toggle()
{
    if(div1.style.visibility=='hidden')
    {
        div1.style.visibility='visible';
       f1.style.height=div1.offsetHeight+'px';
        bt1.value="隐藏";
    }
    else
    {

        div1.style.visibility='hidden';
        f1.style.height='10px';
        bt1.value='展开';
    }
}
</script>
</head>

<body>
<input id="bt1" type="button" onclick="Toggle()" value="隐藏" />
<fieldset id="f1">
<div id="div1" style="visibility:visible">
这是第一部分的内容

</div>

</fieldset>
<br />

这是第二部分的内容
</div>

</fieldset>

</body>

</html>

这里，可能大家很感兴趣的是那些脚本代码。但我要说，那其实很简单。但你可能在测试的时候，发现代码不能起作用。那是因为这个页面必须有第一句声明。【这是必须的】

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

如果要在XSLT中加入这个文档声明，则大致如下

<xsl:output method="html" indent="yes" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

秒客网

在页面中实现内容的展开和收缩

相关文章