JS点击进行展开和折叠的功能代码

最近开发网站需要用到 一些网页前台特效。需要打开网页时部分内容默认隐藏(折叠),然后点击相应的文字或图片进行显示(展开),再点击进行隐藏(折叠)。网上查了资料,类似的代码很多,以下是三种可以实现此功能的代码:

<script>
 /*展开和收起用一个div,也可以说它是个按钮,假设它的id=d1;
 假设需要显示和隐藏的div叫d2;
 下面这段代码只是粗略的实现了你的要求,主要是给你提供个思路;
 */
 $(function(){
 $('#d1').click(function(){//给d1绑定一个点击事件;
             
         /*这个判断的意义是,如果d2是隐藏的,那么让它显示出来,并将d1的文本内容替换成收起,
         如果是显示的,那么就隐藏它并将d1的文本内容替换为展开;*/
         if($('#d2').is(':hidden'))
         {
           $('#d2').slideDown('slow');  
           $(this).text('收起');
         }else{
           $('#d2').slideUp('slow');
           $(this).text('展开');  
             }
                 
     /*这是一个很简单的事件处理,如果还需要跟上图片的变换,就在判断的对应位置写入图片或者背景变换的代码,*/
 });
 });
 </script>
 <div id='d1'>展开</div>
 <div id='d2' style=" display:none">内容</div>    


===============================================================================


 <script type="text/javascript">
 $(function() {
     $("#toggle").click(function() {
         $(this).text($("#content").is(":hidden") ? "收起" : "展开");
         $("#content").slideToggle();
     });
 });
 </script>
<a href="#" id="toggle">展开</a>
<div id="content" style="display: none;"><p>隐藏内容<p><p>隐藏内容<p></div>


===============================================================================
    <script>
    jQuery(function(){
      $(".flip1").click(function(){$(".panel1").slideToggle("slow");});
      $(".flip2").click(function(){$(".panel2").slideToggle("slow");});
    });
    
    </script>

    [新闻网站]&ensp;&ensp; <a href="http://www.news.cn/" target="_blank">新华网</a>&ensp;&ensp;&ensp;&ensp; 人民网&ensp;&ensp;&ensp;&ensp; 人民网&ensp;&ensp;&ensp;&ensp; 人民网&ensp;&ensp;&ensp;&ensp; 人民网&ensp;&ensp;&ensp;&ensp; 人民网&ensp;&ensp;&ensp;&ensp; 人民网&ensp;&ensp;&ensp;&ensp;
<a href="javascript:"><div class="flip1">更多>></div></a>
    
    <div class="panel1" style="display: none;">
    <br />
    <p>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<a href="http://www.news.cn/" target="_blank">新华网</a>&ensp;&ensp;&ensp;&ensp; 人民网&ensp;&ensp;&ensp;&ensp; 人民网&ensp;&ensp;&ensp;&ensp; 人民网</p>
    </div>

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值