方法一:
1 <script type="text/javascript"> 2 $(function() { 3 $("#toggle").click(function() { 4 $(this).text($("#content").is(":hidden") ? "收起" : "展开"); 5 $("#content").slideToggle(); 6 }); 7 }); 8 </script>
1 <a href="#" id="toggle">展开</a> 2 <div id="content" style="display: none;"><p>隐藏内容<p><p>隐藏内容<p></div>
方法二:
1 <script> 2 /*展开和收起用一个div,也可以说它是个按钮,假设它的id=d1; 3 假设需要显示和隐藏的div叫d2; 4 下面这段代码只是粗略的实现了你的要求,主要是给你提供个思路; 5 */ 6 $(function(){ 7 $('#d1').click(function(){//给d1绑定一个点击事件; 8 9 /*这个判断的意义是,如果d2是隐藏的,那么让它显示出来,并将d1的文本内容替换成收起, 10 如果是显示的,那么就隐藏它并将d1的文本内容替换为展开;*/ 11 if($('#d2').is(':hidden')) 12 { 13 $('#d2').slideDown('slow'); 14 $(this).text('收起'); 15 }else{ 16 $('#d2').slideUp('slow'); 17 $(this).text('展开'); 18 } 19 20 /*这是一个很简单的事件处理,如果还需要跟上图片的变换,就在判断的对应位置写入图片或者背景变换的代码,*/ 21 }); 22 }); 23 </script> 24 <div id='d1'>展开</div> 25 <div id='d2' style=" display:none">内容</div>