首页 > Web开发 > 详细

怎么用js或jq点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来.

时间:2017-01-13 14:05:25      阅读:346      评论:0      收藏:0      [点我收藏+]
方法一:
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>

 

怎么用js或jq点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来.

原文:http://www.cnblogs.com/haonanZhang/p/6282419.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!