Question

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

以下是文章：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的大小。看看这个小提琴 https://jsfiddle.net/e2tjq27g/

这是单击“Read less”按钮时执行的事件。

           $(".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;

            });

文字淡出/阅读更多链接

1 个答案: