問題描述：使用jQuery實現風琴菜單的效果
代碼比較簡單，直接上代碼了，JQuery的文件，這裏沒有給。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>風琴菜單</title>
</head>
<style type="text/css">
#div1{
width:200px;
height:400px;
border:1px solid black;
}
.menu{
height:20px;
background:blue;
color:white;
border:1px solid black;
margin-top:1px;
cursor:pointer;
}
.item{
height:18px;
background:green;
color:white;
border:1px solid black;
margin-top:1px;
}
.sub{
display:none
}
</style>
<body>
<div id="div1">
<div class="menu">辦公管理</div>
<div class="sub">
<div class="item">人員管理</div>
<div class="item">倉儲管理</div>
</div>
<div class="menu">公文管理</div>
<div class="sub">
<div class="item">收發公文</div>
<div class="item">日誌管理</div>
</div>
<div class="menu">系統管理</div>
<div class="sub">
<div class="item">權限管理</div>
<div class="item">角色管理</div>
</div>
</div>
</body>
<script src=" jquery-1.11.1.min.js "></script>
<script>
$(".menu").click(function(){
$(this).next(".sub").slideToggle("slow").siblings(".sub").slideUp("slide");
});
</script>
</html>快樂學習，快樂編程