收缩菜单

最新推荐文章于 2024-10-22 11:26:02 发布

原创最新推荐文章于 2024-10-22 11:26:02 发布 · 552 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #div #情感 #html

本文详细介绍了如何实现一个可收缩的菜单功能，并通过实例展示了其在网页设计中的应用，包括HTML、CSS和JavaScript的基本使用。

<!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=gb2312" />
<title>可以收缩的菜单</title>
<style>
dl{
height:16px;
overflow:hidden;
}
.show{
height:10px;
overflow:visible;
}
.hide{
overflow:hidden;
}
div{
position:relative;
margin:2px;
}
</style>
<script language="javascript" type="text/javascript">
function disp(dlNode){
//先获取所有dl的对象
var d=document.getElementsByTagName("dl");

for(var i=0;i<d.length;i++){
//循环所有的节点做一个判断，判断哪个是用户点击的
//如果是用户点击的，显示，否则全部隐藏
//控制div多余内容的显示和隐藏
if(d[i]==dlNode){
//如果是用户点击的，判断当前节点的状态
if(dlNode.className=="show"){
dlNode.className="hide";
}else{
dlNode.className="show";
}

}else{
d[i].className="hide";
}

}
}
</script>

</head>