我有一个阅读更多选项的内容，当用户点击阅读更多内容扩展，主要功能工作查找，但我希望内容显示为向下滑动缓慢，向上功能工作正常，但幻灯片立即出现。抱歉我的英文。
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> <span class="morecontent"><span>' + h + '</span> <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 DEMO - ＆gt; http://jsfiddle.net/039zkqbL/11/
答案 0 :(得分：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>