浅谈CSS+jQuery实现折叠菜单

来源：互联网发布：什么是网络社区营销编辑：程序博客网时间：2024/05/21 10:19

<!DOCTYPE html><html><head><title>折叠菜单</title><style>body{background:grey;font-family:Microsoft Yahei;color:white;}.types a{text-decoration:none;color:white;}.types ul{display:none;}.files ul{display:none;}</style><script src="js/jquery-1.8.2.min.js"></script><script>$(document).ready(function(){var span=$(".files").find("span");var ul=$(".files").find("ul");span.bind("click",function(){ul.each(function(){$(this).css("display","none");});$(this).next().css("display","block");});});</script></head><body><ul class="files"><li class="file"><span>文件2-1</span><ul><li class="document"><a href="#">文档2-1-1</a></li><li class="document"><a href="#">文档2-1-2</a></li></ul></li><li class="file"><span>文件2-2</span><ul><li class="document"><a href="#">菜单2-2-1</a></li><li class="document"><a href="#">菜单2-2-2</a></li></ul></li><li class="file"><span>文件2-3</span><ul><li class="document"><a href="#">菜单2-3-1</a></li><li class="document"><a href="#">菜单2-3-2</a></li></ul></li></ul></body></html>

1 0