动画目的：点击一级目录，展开其二级目录，同时关闭其他一级目录的二级目录。
使用的jQuery方法：toggle(),hide(),parent(),siblings(),find()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴案例</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css" rel="stylesheet">
*{
margin: 0;
padding:0;
}
dl {
width; 300px;
}
dt {
width: 300px;
height: 30px;
border: 2px solid gray;
text-align: center;
}
dd {
width: 300px;
height: 30px;
border: 2px solid grey;
display: none;
}
</style>
</head>
<body>
<dl>
<dt>网页特效</dt>
<dd>手风琴</dd>
<dd>回到顶部</dd>
<dd>图片轮播</dd>
</dl>
<dl>
<dt>前端框架</dt>
<dd>vue</dd>
<dd>react</dd>
<dd>ng</dd>
</dl>
<dl>
<dt>图片工具</dt>
<dd>ps</dd>
<dd>3d</dd>
<dd>2d</dd>
</dl>
<script type="text/javascript">
$(document).ready(function(){
$("dt").click(function(){
$(this).siblings().toggle( );
$(this).parent().siblings().find("dd").hide();
// $(this).siblings().toggle( ).parent().siblings().find("dd").hide();;
});
});
</script>
</body>
</html>