使用 JQuery 显示更多显示更少
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4566137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show more show less with JQuery
提问by Will Curran
I want to show more/less using JQuery. I've tried a couple examples by Googling but neither work. Nothing fancy, I just need a paragraph of text to be cut to a specific height, and a link the will expand/hide additional text.
我想使用 JQuery 显示更多/更少。我已经通过谷歌搜索尝试了几个例子，但都没有奏效。没什么特别的，我只需要将一段文本剪切到特定高度，以及一个将扩展/隐藏其他文本的链接。
回答by jondavidjohn
This should toggle the showing of the full div by clicking the actual div, you can add the click event to any trigger you want.
这应该通过单击实际 div 来切换完整 div 的显示，您可以将单击事件添加到您想要的任何触发器。
HTML:
HTML：
<div id="blah">
Long...Content
</div>
Javascript:
Javascript：
$('#blah').css({height:'20px', overflow:'hidden'});
$('#blah').on('click', function() {
var $this = $(this);
if ($this.data('open')) {
$this.animate({height:'20px'});
$this.data('open', 0);
}
else {
$this.animate({height:'100%'});
$this.data('open', 1);
}
});
Showing less with javascript initially will not hide the div indefinitely for users w/o javascript enabled.
最初使用 javascript 显示较少不会为未启用 javascript 的用户无限期地隐藏 div。
回答by ghostCoder
Use this plugin
使用这个插件
http://plugins.learningjquery.com/expander/index.html
http://plugins.learningjquery.com/expander/index.html
It adds more or less without splicing html content of the text.
它或多或少地添加了文本的 html 内容。
回答by Zack Burt
untested, but should work:
未经测试，但应该工作：
<div style="height:500px;overflow:hidden" id="blah">
Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.
</div>
<a href="#" id="showmore">Show more</a>
<script>
$("#showmore").live('click', function() {
$("#blah").css('height','1000px');
});
</script>
回答by Keith
Quick and dirty sample:
快速和肮脏的样品：
<style>
.collapsed {height:50px; overflow:hidden}
</style>
<script>
$(function() {
$(".expander").click(function() { $("div").toggleClass("collapsed"); });
})
</script>
<div class="collapsed">LOTS AND LOTS OF TEXT LOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXT</div>
<span class="expander">Expand/Collapse</span>
回答by Danish
My solution is a bit different.
我的解决方案有点不同。
function SetMoreLess(para, thrLength, tolerance, moreText, lessText) {
var alltext = $(para).html().trim();
if (alltext.length + tolerance < thrLength) {
return;
}
else {
var firstHalf = alltext.substring(0, thrLength);
var secondHalf = alltext.substring(thrLength, alltext.length);
var firstHalfSpan = '<span class="firstHalf">' + firstHalf + '</span>';
var secondHalfSpan = '<span class="secondHalf">' + secondHalf + '</span>';
var moreTextA = '<a class="moreText">' + moreText + '</a>';
var lessTextA = '<a class="lessText">' + lessText + '</a>';
var newHtml = firstHalfSpan + moreTextA + secondHalfSpan + lessTextA;
$(para).html(newHtml);
}
}
The logic is to break the length content into two pieces and hide the second one. The second section is shown using 'show more' link. You can find complete detail here, http://danishsultan.blogspot.com/2012/03/adding-show-less-show-more-feature.html.
逻辑是将长度内容分成两部分并隐藏第二部分。第二部分使用“显示更多”链接显示。您可以在此处找到完整的详细信息，http://danishsultan.blogspot.com/2012/03/adding-show-less-show-more-feature.html。
