幻灯片切换不工作幻灯片上

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>

​