asp.net-mvc - 在 C# 中使用显示和隐藏选项打破字符串并合并字符串

Question

我的要求：

我的字符串应该在一些单词之后被中断，并且我们需要放置“+more”选项。当用户单击“+更多”时需要显示整个文本。文本结束后需要显示“-hide”。当用户单击“-hide”时，它应该显示在前面。表示带有“+more”选项的一些文本。任何人都可以帮助这个。

我的代码：

var fullString= "string with above 150 charecters here";
 var compressedString = TotalNews.fullString(150);
 <div class="Temphide">
   @compressedString
  </div>
<a class="show" id="@newsItem.ApplicationNewsId">+More</a>

var Continues = fullString.Substring(150, TotalNews.Length - 150);
<div style="display:none;" >
 @fullString &nbsp;&nbsp;<a class="hide">-Hide</a>
</div>

脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $('.show').click(function () {
            $(this).next('div').slideToggle();
        });

        $('.hide').click(function () {
            $(this).parent().slideUp();
        });
    });

</script>

我的问题：
在这里，当我单击“+more”选项时，我会用“-hide”显示“+more”。要求是单击“+more”时需要显示带有“-hide”选项的完整字符串。但我正在展示“+more”和“-hide”。请任何人都可以帮助这个。

Answer 1

脚本：

$.fn.truncate = function(options) {
    $(this).append('<span class="truncate_lh" style="display:none;">&nbsp;</span>')

    var defaults = {
        maxlines: 2,
        moreText: 'More',
        lessText: 'Less',
        ellipsis: '...'
    };

    $.extend(options, {
        lineheight: ($('.truncate_lh').css('height').replace('px', ''))
    });
    $.extend(options, {
        maxheight: (options.maxlines * options.lineheight)
    });
    options = $.extend(defaults, options);

    return this.each(function() {
        var text = $(this);

        if (text.height() > options.maxheight) {

            text.css({
                'overflow': 'hidden',
                'height': options.maxheight + 'px'
            });

            var link = $('<a href="#" class="showHide">' + options.moreText + '</a>');
            var wrapDiv = $('<div class="truncate_wrap" />');

            text.wrap(wrapDiv);
            text.after(link);

            link.click(function() {
                if (link.text() == options.moreText) {
                    link.text(options.lessText);
                    text.css('height', 'auto');
                } else {
                    link.text(options.moreText);
                    text.css('height', options.maxheight + 'px');
                }
                return false;
            });
        }
    });
};

$().ready(function() {  
    $('.truncate').truncate( {  
        maxlines: 4
    });  
}); 

看法

<p class="truncate">//Here text...</p>

我在帮助下做到了这一点

http://jsfiddle.net/Pjgzq/1/

访问此链接