JQuery：实现列表展开和缩放
生活随笔
收集整理的這篇文章主要介紹了
JQuery：实现列表展开和缩放
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<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>總結
以上是生活随笔為你收集整理的JQuery：实现列表展开和缩放的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C#语法：正则表达式 --Trim()的
- 下一篇： 用html编辑csdn的方法