jquery 展开关闭效果
<!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>
<!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>
