请选择 进入手机版 | 继续访问电脑版
繁体中文

巅峰霸主

 找回密码
 立即注册

QQ登录

只需一步,快速开始

JavaScript点击展开再点击收起默认收起代码jQuery代码分享

[复制链接]
烈火大地 发表于 2018-2-7 14:04:42 | 显示全部楼层 |阅读模式

游客只能显示部分内容,请登录后查看帖子完整内容!!!注册完全免费。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
实现的功能是鼠标点击展开,再点击时收起,js代码都简单哦,jQuery实现代码,js代码如下:
  1. 方法一:
  2. <script type="text/javascript">
  3. $(function() {
  4.     $("#toggle").click(function() {
  5.         $(this).text($("#content").is(":hidden") ? "收起" : "展开");
  6.         $("#content").slideToggle();
  7.     });
  8. });
  9. </script>
复制代码

<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>
复制代码
回复

使用道具 举报

QQ|小黑屋|手机版|Archiver|巅峰霸主 ( 京ICP备12023415号-2 )

声明:本站的任何信息和内容仅代表作者的立场和观点,与巅峰霸主网无关。

禁止在巅峰霸主网发布任何与《中华人民共和国法律》相抵触的言论!

GMT+8, 2018-9-22 21:09 , Processed in 0.131940 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表