<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style>
*{
list-style: none;
text-decoration: none;
/*text-align: center;*/
}
#my_menu{
width: 65px;
/*border: 1px solid black;*/
border-radius:5px;
background-color:lightgoldenrodyellow ;
}
span a{
width: 70px;
border: 1px solid black;
border-radius:5px;
color: gray;
}
.collapsed {
height: 20px;
}
#my_menu div{
overflow: hidden;
}
span{
color: white;
background-color: black;
}
span:hover{
background-color: green;
}
li{
padding: 3px 0px;
border-bottom: 1px solid gainsboro;
}
a{
font-size:14px ;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<div id="my_menu" class="sdmenu">
<div>
<span class="menuSpan" style="border-radius:5px 5px 0px 0px;">在线工具 </span>
<li><a href="#">图像优化</a></li>
<li><a href="#">收藏夹 </a></li>
<li><a href="#">邮 件</a></li>
<li><a href="#">按 钮</a></li>
</div>
<div class="collapsed">
<span class="menuSpan">支持我们</span>
<li><a href="#">推荐我们</a></li>
<li><a href="#">链接我们</a></li>
<li><a href="#">资源</a></li>
</div>
<div class="collapsed">
<span class="menuSpan">合作伙伴</span>
<li><a href="#">JS工具包</a></li>
<li><a href="#">CSS驱动</a></li>
<li><a href="#">CForms</a></li>
</div>
<div class="collapsed" style="padding-bottom: 5px;">
<span class="menuSpan">测试电流</span>
<li><a href="#">测试1</a></li>
<li><a href="#">测试2</a></li>
<li><a href="#">测试3</a></li>
</div>
</div>
</body>
<script type="text/javascript" src="js/tools.js">
//tools.js 在我的博客里
</script>
<script type="text/javascript">
var menuSpan=document.getElementsByClassName("menuSpan");
//定义一个变量来保存当前打开的div
var openDiv=menuSpan[0].parentNode;
for(i=0;i<menuSpan.length;i++){
menuSpan[i].onclick=function(){
// alert("Hello");
//获取父元素div
var parDiv=this.parentNode;
//-在切换之前，获取元素盖度
var begin=parDiv.offsetHeight;
//用tools.js通过切换高度关闭打开div
toggleClass(parDiv,"collapsed");
//-在切换之后，获取元素盖度
var end=parDiv.offsetHeight;
// console.log("begin："+begin+"，end："+end);
//-动画效果，就是高度间的过度
parDiv.style.height=begin+"px";
//move()构造函数用.style...使用设置的，所有上面要设置一下.style...,不改变格式
move(parDiv,"height",end,10,function(){
//动画执行完毕，内联样式没有存在的意义反而会影响class，删除
parDiv.style.height="";
});
//来完成打开一个另外打开的关闭
//判断两个不相等，防止同一个div多加一次了class
if(openDiv!=parDiv && !hasClass(openDiv,"collapsed")){
//添加class，以关闭div
// addClass(openDiv,"collapsed");
//为统一过度动画，toggleClass()
toggleClass(openDiv,"collapsed"); //hasClass()没有才进判断
//，达到addClass()相同效果
}
//修改openDiv为当前打开的菜单
openDiv=parDiv;
}
}
</script>
</html>
