淺談CSS+jQuery實現摺疊菜單

來源:互聯網
上載者:User
<!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>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.