Question

在Razor页面上，我有一个很长的评论，我想要切断。然后，我想在用户提示时显示完整评论。

在页面上，我有一个for循环，其中包含以下内容：

<td>
    @if (Model.ApprovedFacilities[i].Comment.Length > 100)
    {
        var comment = Model.ApprovedFacilities[i].Comment;
        <span id="DisplaySpan_@i">@comment.Substring(0, 100)...</span>
        <span style="display:none" id="InitialSpan_@i">@comment.Substring(0, 100)...</span>
        <span style="display:none" id="NextSpan_@i">@comment</span>
        <a id="@i" class="showbutton">Show</a>
    }
    else
    {
        <label>@Model.ApprovedFacilities[i].Comment</label>
    }
</td>

我遇到的问题是设置jquery动画以获得平滑的向下滑动效果。目前我的jquery看起来像这样：

$(".showbutton").click(function () {

    var i = $(this).prop('id');
    if ($(this).html() == 'Show') {
        $("#DisplaySpan_" + i).animate({
            //'opacity': 0,
            'height': 'toggle'
        }, 400, function () {
            $(this).html($("#NextSpan_" + i).html()).animate({
                //'opacity': 1,
                'height': 'toggle'
            }, 400);
        });
        $(this).html("Hide");
    } else {
        $("#DisplaySpan_" + i).animate({
            //'opacity': 0,
            'height': 'toggle'
        }, 400, function () {
            $(this).html($("#InitialSpan_" + i).html()).animate({
                //'opacity': 1,
                'height': 'toggle'
            }, 400);
        });
        $(this).html("Show");
    }
});

这导致点击按钮（现在的锚标签），元素的高度在转到扩展高度之前变为零。我在下面的小提琴演示了这种行为：

http://jsfiddle.net/ps7zw4yg/

Answer 1

试试这个脚本：

<script>
    $(function(){
        $(".showbutton").click(function () {
            var i = $(this).prop('id');
            if ($(this).html() == 'Show') {
                var h = $("#NextSpan_" + i).height() + 80;
                $("#DisplaySpan_" + i).animate({
                    'height': h + 'px'
                }, 2000, 'linear');
                $("#DisplaySpan_" + i).html($("#NextSpan_" + i).html());
                $(this).html("Hide");
            } else {
                var h = $("#InitialSpan_" + i).height();
                $("#DisplaySpan_" + i).animate({
                    'height': h + 'px'
                }, 2000, 'linear', function(){
                    $("#DisplaySpan_" + i).html($("#InitialSpan_" + i).html());
                });
                $(this).html("Show");
            }
        });
    });
    </script>

Jquery动画扩展表格单元格内容

1 个答案: