twitter-bootstrap 展开/折叠 HTML 中的文本 - Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24420230/
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
Expand/Collapse Text in HTML - Javascript
提问by Joseph Ho
I'm trying to get a 'See More' (expand) and 'See Less' (collapse) javascript code working. I will loop through and call this javascript code on each class instance in the HTML.
我正在尝试使“查看更多”（展开）和“查看更少”（折叠）的 javascript 代码正常工作。我将遍历并在 HTML 中的每个类实例上调用此 javascript 代码。
This actually works for the first time it appears on the page. I put in Console.logs to see that it works correctly. i.e. each time I click 'See More' the console will print 'Expand/Collapse' once.
这实际上是第一次出现在页面上。我放入 Console.logs 以查看它是否正常工作。即每次我单击“查看更多”时，控制台都会打印一次“展开/折叠”。
However, each additional instance of the device (on another piece of text on the page), it won't expand at all.
但是，设备的每个附加实例（在页面上的另一段文本上），它根本不会扩展。
What happens is that in the second instance, the console prints - "Expand, Collapse". So it actually does both instantaneously (which means it doesn't expand at all).
发生的情况是，在第二个实例中，控制台打印 - “展开，折叠”。所以它实际上是瞬间完成的（这意味着它根本不会扩展）。
In the third, it prints - "Expand, Collapse, Expand, Collapse, Expand, Collapse". Almost like exponential growth... Any ideas?
在第三个中，它打印 - “展开、折叠、展开、折叠、展开、折叠”。几乎就像指数增长......有什么想法吗？
function showMoreLess(element) {
var showChar = 150;
var ellipsestext = "...";
var moretext = "See More";
var lesstext = "See Less";
var content = $(element).html();
if (content.length > showChar) {
var show_content = content.substr(0, showChar);
var hide_content = content.substr(showChar, content.length - showChar);
var html = show_content
+ '<span class="moreelipses">'
+ ellipsestext
+ '</span><span class="remaining-content"><span>'
+ hide_content + '</span> <a href="" class="morelink">'
+ moretext
+ '</a></span>';
$(element).html(html);
}
$(".morelink").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html("See More");
console.log("Collapse") // "Collapse" appears in console
} else {
$(this).addClass("less");
$(this).html("See Less");
console.log("Expand") // "Expand" appears in console
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
}
}
This is the JQuery code that loops through each class:
这是遍历每个类的 JQuery 代码：
$(function () {
$.each($(".limitedTextSpace"), function(index, value) {
showMoreLess(value);
});
});
EDIT:
编辑：
I followed Roberto Linares' format and recreated the function like so:
我按照 Roberto Linares 的格式重新创建了函数，如下所示：
function showMoreLess(element) {
var showChar = 150;
var ellipsestext = "...";
var moretext = "See More";
var lesstext = "See Less";
var content = $(element).html();
if (content.length > showChar) {
var show_content = content.substr(0, showChar);
var hide_content = content.substr(showChar, content.length - showChar);
var html = '<span class="collapsed">' + show_content
+ ellipsestext
+ '</span><span class="expanded">'
+ content
+ '</span><a href="javascript:void(0)" class="collapsed">'
+ moretext
+ '</a><a href="javascript:void(0)" class="expanded">'
+ lesstext
+ '</a>'
$(element).html(html);
}
}
}
Then I made slight changes to the other looping function as well:
然后我也对另一个循环函数做了一些细微的改动：
$(function () {
$.each($(".limitedTextSpace"), function(index, value) {
showMoreLess(value);
});
$(".expanded").hide();
$(".expanded, .collapsed").click(function() {
$(this).parent().children(".expanded, .collapsed").toggle();
});
});
However, now there is the issue with when there are breaks in the text. The code interprets each paragraph of the same text as a different expand/collapse instances - meaning instead of one expand/collapse for a block of text, there is multiple for each paragraph.
但是，现在存在文本中断的问题。该代码将同一文本的每个段落解释为不同的展开/折叠实例 - 这意味着不是一个文本块的一个展开/折叠，而是每个段落有多个。
采纳答案by Roberto Linares
It doesn't expand at all the second and following times because you already lost the complete content when you replaced it with the collapsed content. This happens because you never 'save' temporally the complete content elsewhere so you can place it back when the expand link is clicked.
它在第二次和接下来的时间根本不会扩展，因为当你用折叠的内容替换它时你已经丢失了完整的内容。发生这种情况是因为您永远不会将完整的内容临时“保存”在别处，因此您可以在单击展开链接时将其放回原处。
I would recommend you to change your javascript logic to place in the HTML both collapsed an expanded content and toggle its visibility through the links.
我建议您更改 javascript 逻辑以放置在 HTML 中，同时折叠展开的内容并通过链接切换其可见性。
Example:
例子：
HTML:
HTML：
<ul>
<li>
<span class="expanded">Expanded HTML content</span>
<span class="collapsed">Collap...</span>
<a href="javascript:void(0)" class="collapsed">Expand</a>
<a href="javascript:void(0)" class="expanded">Collapse</a>
</li>
<li>
<span class="expanded">Expanded HTML content</span>
<span class="collapsed">Collap...</span>
<a href="javascript:void(0)" class="collapsed">Expand</a>
<a href="javascript:void(0)" class="expanded">Collapse</a>
</li>
<li>
<span class="expanded">Expanded HTML content</span>
<span class="collapsed">Collap...</span>
<a href="javascript:void(0)" class="collapsed">Expand</a>
<a href="javascript:void(0)" class="expanded">Collapse</a>
</li>
<li>
<span class="expanded">Expanded HTML content</span>
<span class="collapsed">Collap...</span>
<a href="javascript:void(0)" class="collapsed">Expand</a>
<a href="javascript:void(0)" class="expanded">Collapse</a>
</li>
</ul>
Javascript:
Javascript：
$(document).ready(function() {
$(".collapsed").hide();
$(".expanded, .collapsed").click(function() {
$(this).parent().children(".expanded, .collapsed").toggle();
});
});
Working JSFiddle: http://jsfiddle.net/susxK/
工作 JSFiddle：http: //jsfiddle.net/susxK/
回答by Joseph Ho
With the help of Roberto Linares, I fixed the code to work like so:
在 Roberto Linares 的帮助下，我修复了代码，如下所示：
function showMoreLess(element) {
var showChar = 256;
var ellipsestext = "...";
var moretext = "See More";
var lesstext = "See Less";
var content = $(element).html();
if (content.length > showChar) {
var show_content = content.substr(0, showChar);
var hide_content = content.substr(showChar, content.length - showChar);
var html = '<span class="collapsed">' + show_content
+ ellipsestext
+ '</span><span class="expanded">'
+ content
+ '</span> <a href="javascript:void(0)" class="collapsed moretext">'
+ moretext
+ '</a><a href="javascript:void(0)" class="expanded lesstext">'
+ lesstext
+ '</a>'
$(element).html(html);
}
}
}
And in a separate function on when document is ready:
并在文档准备就绪的单独功能中：
$(function () { // When page is loaded, run showMoreLess(value) on each instance of limitedTextSpace classes
$.each($(".limitedTextSpace"), function(index, value) {
showMoreLess(value);
});
$(".expanded").hide();
$(".moretext, .lesstext").click(function() {
$(this).parent().children(".expanded, .collapsed").toggle();
});
});
});
