<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>
8607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
