js点击 收起 查看全部

<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');
          }

        }
      })
    },