zoukankan      html  css  js  c++  java
  • avalon.js 文字显示更多与收起

    isShowMore: function (content) {
    if(content && content.length >= 124){
    var shortContent = content.substring(0,124);
    var showMoreContent = "<pre>"+shortContent+"<div class='showMoreContent'><span>...</span><a class='btnShowMore' ms-click='showToggle(event,$index,".questionSegment2",question.content)'>显示全部</a></div></pre>"
    return showMoreContent;
    }else {
    return content;
    }
    },
    /**
    * 显示和隐藏按钮回调
    * @param e
    * @param index
    * @param _class 额外的样式
    */
    showToggle: function (e, index, _class,content) {
    _class = _class || '';

    var eTxt = e.target.innerHTML
    var p = $('.textBox' + _class + '.' + index)[0]
    if (eTxt === '显示全部') {
    e.target.innerHTML = '收起'
    p.classList.add('showMore')
    $(this).prev('span').html('');

    var pre = e.target.parentElement.parentElement
    pre.firstChild.remove()
    var div = pre.querySelector('div')
    var elm = document.createElement('text')
    elm.innerText = content
    pre.appendChild(elm)
    pre.insertBefore(elm,div)

    } else {
    e.target.innerHTML = '显示全部'
    p.classList.remove('showMore')
    $(this).prev('span').html('...');

    var shortContent = content.substring(0,124);
    var pre = e.target.parentElement.parentElement
    pre.firstChild.remove()
    var div = pre.querySelector('div')
    var elm = document.createElement('text')
    elm.innerText = shortContent
    pre.appendChild(elm)
    pre.insertBefore(elm,div)
    }
    },


    <div class="textBox questionSegment2 no-height" ms-class="{{$index}}" ms-html="isShowMore(question.content)"></div>
  • 相关阅读:
    仿微博添加和删除的动画
    到公司实习一个月记
    写一份好简历
    排序算法之快速排序
    PHP和MYSQL中的日期和时间
    我的php经历
    新的征程
    毕业设计笔记
    排序算法之总结
    javascript执行效率小结
  • 原文地址:https://www.cnblogs.com/wangqiao170/p/6566209.html
Copyright © 2011-2022 走看看