您的位置：首页 > Web前端 > JavaScript

javascript使用DOM模型和CSS实现菜单的折叠和展开

2007-04-09 15:01 1096 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<style type="text/css">
<!--
dl            {    background-color:#000;color:#fff;width:100px;}
dt            {    cursor:pointer;width:100%;background-color:#666;}
.expand        {    overflow:visible;}
.collapse        {    height:16px;overflow:hidden;}
//-->
</style>
<script language="JavaScript"  type="text/javascript">
<!--
function toggleDl(dt){
    var dl=dt.parentNode;
    if("collapse"==dl.className)dl.className="expand";
    else dl.className="collapse";
}
//-->
</script>
</head>
</ul>
<body>
<dl>
    <dt onclick="toggleDl(this)">根结点</dt>
    <dd>子结点1</dd>
    <dd>子结点2</dd>
    <dd>子结点3</dd>
    <dd>子结点4</dd>
    <dd>子结点5</dd>
</dl>
</body>
</html> 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript css html function
相关文章推荐
新的分享
章节导航