js实现收缩的下拉菜单

最新推荐文章于 2022-06-24 17:55:17 发布

zhaoxinglei0309

最新推荐文章于 2022-06-24 17:55:17 发布

阅读量2.4k

点赞数

文章标签： div xhtml 情感 html

本文链接：https://blog.csdn.net/zhaoxinglei0309/article/details/7334172

版权

效果图

<!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>
   dl{
   height:16px;
   overflow:hidden;
   }

   .show{
    height:10px;
    overflow:visible;
    }
   .hide{
    overflow:hidden;
    }
div{
  position:relative;
  margin:2px;}
</style>
<script language="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>