<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<h4>遊戲分類</h4>
<ul>
<li><a href="#">休閒遊戲</a></li>
<li><a href="#">射擊遊戲</a></li>
<li><a href="#">益智遊戲</a></li>
<li><a href="#">雙人遊戲</a></li>
</ul>
<script>
$(function () {
$("h4").click(function () {
$(this).siblings().slideToggle(1000);
});
})
</script>
</body>
</html>利用JQuery實現列表展開和收縮比較簡單，搞好標題和內容的關係，比如上面是兄弟關係，利用slideToggle()就行了
當然還有鼠標移入範圍的時候展開，移除範圍的時候收縮列表
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<h4>遊戲分類</h4>
<ul>
<li><a href="#">休閒遊戲</a></li>
<li><a href="#">射擊遊戲</a></li>
<li><a href="#">益智遊戲</a></li>
<li><a href="#">雙人遊戲</a></li>
</ul>
<script>
$(function () {
$("#category").hover(function () {
$(this).children("ul").stop(false,false).slideDown(1000);
}, function () {
$(this).children("ul").stop(false,false).slideUp(500);
});
})
</script>
</body>
</html>