js点击收起查看全部

最新推荐文章于 2023-09-03 17:09:39 发布

KeroroLX

最新推荐文章于 2023-09-03 17:09:39 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue笔记基础小功能

本文链接：https://blog.youkuaiyun.com/github_38928905/article/details/85291187

vue笔记同时被 3 个专栏收录

35 篇文章

订阅专栏

基础

22 篇文章

订阅专栏

小功能

4 篇文章

订阅专栏

<ul id='listUl' class='clearfix'>
        <li v-for='item in listOption.listData'>
          <div class="commentMsg meddleFontSize">
            <p class="Pellipsis2 webkitOrient mainMsg">{{item.tags}}</p>
             <!--大于60字才有隐藏效果-->
            <p v-if="item.tags.length>60">
              <span class="activedTheme lookAll">查看全文</span>
              <span class="activedTheme hideAll displayNone">收起</span>
            </p>
          </div>
        </li>
      </ul>

 mounted: function () {
      var _this=this;
      document.getElementById('listUl').addEventListener('click',function(ev){
        var ev=ev||window.event;
        var targetObj=$(ev.target);

        if(targetObj.attr('class')){
          if(targetObj.attr('class').indexOf('lookAll')!=-1){
            var parents=targetObj.parents('.commentMsg');
            parents.find('.mainMsg').removeClass('Pellipsis2');
            parents.find('.hideAll').removeClass('displayNone');
            targetObj.addClass('displayNone');
          }else if(targetObj.attr('class').indexOf('hideAll')!=-1){
            var parents=targetObj.parents('.commentMsg');
            parents.find('.mainMsg').addClass('Pellipsis2');
            parents.find('.lookAll').removeClass('displayNone');
            targetObj.addClass('displayNone');
          }

        }
      })
    },