jquery - 滑动切换不适用于向上滑动

Question

我有一个带有“阅读更多”选项的内容，当用户点击“阅读更多”时内容会扩展，主要功能可以找到，但我希望内容显示为缓慢上下滑动，向上功能工作正常但滑动下来立即出现。对不起我的英语。

HTML

<div class="comment more">
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.
</div>

<div class="comment more">
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.
</div>

CSS

.comment {
    font-size: 18px;
    letter-spacing: 0.12em;
    max-width: 800px;
}
a.morelink{text-decoration:none;outline:none}.morecontent span{display:none}

JS

$(document).ready(function() {
    var showChar = 200;
    var ellipsestext = "...";
    var moretext = "Read More";
    var lesstext = "Close";
    $('.more').each(function() {
        var content = $(this).html();
        if (content.length > showChar) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar - 1, content.length - showChar);
            var html = c + '<span class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
            $(this).html(html);
        }
    });
    $(".morelink").click(function() {
        if ($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().slideToggle();
        $(this).prev().slideToggle();
        return false;
    });
});

JSFIDDLE 演示 --> http://jsfiddle.net/039zkqbL/11/

Answer 1

我匆忙开发了一个快速解决方案(所以可能不是最优雅的，但它有效):在下面运行它

var minChars = 200,
    readMoreEllipsis = "<span class='ellipsis'>... <a href='#' class='readmore'>Read more</a></span>",
    readLessEllipsis = "<span class='ellipsis'><a href='#' class='readmore'>Read less</a></span>";

$(".more").each( function(){
    var self = $(this),
        origText = self.text();
        
    self.attr("data-original-text", origText) // Storing original text in attributes
        .attr("data-full-height", self.height()) // Storing minimum height in attributes
        .html(origText.substr(0,minChars) + readMoreEllipsis)
        .attr("data-condensed-height", self.height()); // Storing minimum height in attributes
    
});


$(document).on('click', "a.readmore", function(){
    var self= $(this),
        paragraph = self.parent().parent(),
        origText = paragraph.attr("data-original-text"),
        minHeight = paragraph.attr("data-condensed-height"),
        maxHeight = paragraph.attr("data-full-height");
    
    if(paragraph.attr('data-expanded')==='true'){
        paragraph
            .attr('data-expanded','false')
            .css("border","green dashed 1px")
            .css("max-height",maxHeight+"px")
        targetHeight = minHeight;
    }else{
        paragraph
            .attr('data-expanded','true')
            .css("border","red dashed 1px")
             .css("max-height",minHeight+"px")
            .html(origText + readLessEllipsis)
        targetHeight = maxHeight;
    }
    
    paragraph.animate({
        maxHeight : targetHeight
    },
    1000,
    function(){ // Animation callback. Launched after the collapse or expand has finished.
        if(paragraph.attr('data-expanded')==='true') return;
        paragraph.html(origText.substr(0,minChars) + readMoreEllipsis);
    });
    
});

div.more{
   display: block;
   overflow:hidden;
    border: blue solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment more">
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.
</div>
<br><br>
<div class="comment more">
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.
</div>