可收缩菜单的实现方式-优快云博客

本文介绍了如何使用HTML、CSS和JavaScript实现一个可收缩的菜单，包括样式设置、事件监听和动态显示隐藏功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>