javascript - 文本淡出/阅读更多链接

Question

我正在使用从 CSS 技巧中找到的片段，但我在编辑代码以实现我的想法时遇到了一些麻烦。

这是文章:https://css-tricks.com/text-fade-read-more/

这很好用，但我希望用户可以选择在完成后关闭展开的段落。所以一个“少读”或“关闭”功能。

我正在使用下面的代码

<script>
// DOM Ready
$(function() {

    var $el, $ps, $up, totalHeight;

    $(".sidebar-box .button").click(function() {

        // IE 7 doesn't even get this far. I didn't feel like dicking with it.

        totalHeight = 0

        $el = $(this);
        $p  = $el.parent();
        $up = $p.parent();
        $ps = $up.find("p:not('.read-more')");

        // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
        $ps.each(function() {
            totalHeight += $(this).outerHeight();
            // FAIL totalHeight += $(this).css("margin-bottom");
        });

        $up
            .css({
            // Set height to prevent instant jumpdown when max height is removed
            "height": $up.height(),
            "max-height": 9999
        })

            .animate({
            "height": totalHeight
        },500,function(){
            //Callback - after the animation is over
            jQuery('#masonry-content').masonry();
        });

        // fade out read-more
        $p.fadeOut();

        // prevent jump-down
        return false;

    });

});

在评论的底部，有人建议使用更新来实现此功能，但那是行不通的。

这是一个活生生的例子:http://www.cubadupa.co.nz/?post_type=marcato_artist

有什么想法吗？我是 javscript 的新手，很抱歉，如果这是一个简单的修复。

Answer 1

您必须制作另一个按钮“Read Less”并为该按钮附加一个事件，以便在单击该按钮时事件调整父 div 的大小。看看这个 fiddle https://jsfiddle.net/e2tjq27g/

这是点击“少读”按钮时执行的事件。

           $(".sidebar-box .read-less-button").click(function() {
                $el = $(this);
                $p  = $el.parent();
                $up = $p.parent();
                totalHeight = $up.height();
                $up.css({
                        "height": totalHeight,
                        "max-height": 9999
                    })
                    .animate({
                        "height": $orgHeight
                    });

                $p.fadeOut();
                $('.read-more').fadeIn();

                return false;

            });