jq实现展开全部内容,收起全部内容

jq实现展开全部内容,收起全部内容

 

整理一个昨天做的案例,虽然很简单我感觉我这个脑子有必要整理一下,不然睡一觉又忘记了,这个是关于移动端页面中,如果模块中内容过多,首先展示部分,用户自己选择看不看全部的一个小功能。

首先看看这个页面的效果吧,如下图所示:

小月博客

下面一起来看一下代码吧

html部分(css样式就不在这里写了,需要自行下载)

<div class="con">
    <p class="intro_title">就让我们,晚点在一起。然后一辈子。</p>
    <p class="intro_content more_h">
        不需要晚多久,就再过那么几年,那时我们有稳定的收入,靠谱的工作,所有的一切步入正轨、我不再是一个追梦的漂浮的女生,而是一个只寻求安稳生活的女人,你不再是一个青涩的毛头小伙子,而是一个成熟的男人。
        <br />
        到那个时候,我们在相爱、
        <br />
        如果,我们可以晚一些相遇。<br />
        不需要多久,就在过那么几年,那时候我们已经学会了知足学会了包容和珍惜,而你也真的能从容的面对那些不追逐你的异性、
        <br />
        到那时候,那时候我们在相爱、
    </p>
    <div class="more">展开查看</div>
 </div>

JS部分

这里是控制内容字数来实现这个功能的。

  • 首先定义一个content 存放原始的内容。方便展开全部内容的时候使用
  • 变量 more 是为了判断当前状态时展开还是收起的状态
  • maxheight 是定义一个最大字数限制
<script>
    $(function(){
        var content = $(".more_h").html();
        var more = true;
        //限制字符个数
        var hide = function (){
            $(".more_h").each(function(){
                var maxheight=120;
                if($(this).text().length>maxheight){
                    $(this).text($(this).text().substring(0,maxheight));
                    $(this).html($(this).html()+'...');
                    more = true;
                    $('.more').html("查看更多");
                } else {
                    $('.more').hide();
                }
            });
         };
     hide();
     $('.more').click(function(){
         if(more){
             $(".more_h").html(content);
             $(this).html("收起文章");
             more = false;
         }else{
             hide();
         }
     });
   })
 </script>

如果css有一个属性可以直接控制多行的收缩,那就太棒了!

未经允许不得转载:小月博客 » jq实现展开全部内容,收起全部内容
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(2) 打赏

评论5

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #4
    转载了
    fufee2018-04-20 20:14:26回复
    • 好的
      小月2018-05-02 17:23:50回复
  2. #3
    之前也尝试写过,过来学习下
    2333优站聚集地2017-12-03 15:25:03回复
  3. #2
    感觉还不错
    lglong5192017-10-22 2:37:49回复
  4. #1
    评论测试
    没登陆2017-10-05 11:58:19回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏