<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>展开关闭效果</title><script type="text/javascript" src="jquery.min.js"></script><style>bady{font-family:"微软雅黑", "黑体";font-size:12px;}.nav{ width:400px; overflow:hidden; margin-bottom:8px;}.nav_tit{background:#000000;height:27px;line-height:27px; width:400px;color:#ffffff;text-align:center; overflow:hidden}.key{width:50px;float:right;margin:0 0 0 0; cursor:pointer;}.nav_box{ width:400px; height:200px; background-color:#0066CC;}</style></head><body><div class="nav"><div class="nav_tit"><span class="key">展开</span><span>标题</span></div><div class="nav_box">sdfsf</div></div><div class="nav"><div class="nav_tit"><span class="key">展开</span><span>标题</span></div><div class="nav_box">sdfsf</div></div></body></html><script type="text/javascript">$(function(){$(".nav_box").hide();$(".key").toggle(function(){$(this).html("关闭");$(this).parent().parent().find(".nav_box").toggle();},function(){$(this).html("展开");$(this).parent().parent().find(".nav_box").toggle();});});</script>
转载于:https://www.cnblogs.com/vania/p/3323726.html
相关资源：jQuery实现DIV层收缩展开的方法