HTML-Javascript中的展开/折叠文本

我正在尝试让“看到更多”（扩展）和“看到更少”（折叠）javascript代码正常工作。我将在HTML中的每个类实例上循环并调用此javascript代码

这实际上是它第一次出现在页面上。我输入了Console.logs以查看它是否正常工作。i、 e.每次单击“查看更多”时，控制台都会打印一次“展开/折叠”

但是，每增加一个设备实例（在页面上的另一段文本上），它都不会扩展

在第二个实例中，控制台打印“展开，折叠”。所以它实际上是在瞬间同时发生的（这意味着它根本不会膨胀）

在第三张中，它打印“展开，折叠，展开，折叠，展开，折叠”。几乎像指数增长。。。有什么想法吗

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>&nbsp;&nbsp;<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;
});

编辑：

我遵循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);
}

---

然而，现在有一个问题是，文本中何时出现中断。代码将同一文本的每个段落解释为不同的展开/折叠实例，这意味着一个文本块不是一个展开/折叠实例，每个段落都有多个段落。

它在第二次和之后的所有时间都不会展开，因为当您用折叠的内容替换它时，您已经丢失了完整的内容。这是因为您从未将完整内容临时“保存”到其他位置，以便在单击展开链接时将其放回原处

我建议您更改javascript逻辑，将其放在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>

$(document).ready(function() {
    $(".collapsed").hide();

    $(".expanded, .collapsed").click(function() {
        $(this).parent().children(".expanded, .collapsed").toggle();
    });
});

---

使用JSFIDLE:

在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>&nbsp;&nbsp;<a href="javascript:void(0)" class="collapsed moretext">'
                + moretext
                + '</a><a href="javascript:void(0)" class="expanded lesstext">' 
                + lesstext
                + '</a>'
    $(element).html(html);
}

---

}))

你给胸带贴上标签了？Bootstrap有一个内置的折叠，感谢Roberto，它遵循相同的格式，并为我修复了它。然而，有一个新的问题，即当文本块中出现中断时，它会将每个段落解释为单独的文本块。有什么想法吗？看看我用javascript制作的另一把小提琴：它似乎可以处理我示例HTML中的各种块元素。也许如果你发布一些你的HTML，我可以找出为什么它不适合你。没关系，让它工作吧！不知道到底发生了什么。谢谢你，伙计！我做了一些更改，这样您只能在单击“seemore/seeless”时展开/折叠，而不能在整个span元素上展开/折叠。但是，是的，一切都很好。再次感谢。

$(document).ready(function() {
    $(".collapsed").hide();

    $(".expanded, .collapsed").click(function() {
        $(this).parent().children(".expanded, .collapsed").toggle();
    });
});

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>&nbsp;&nbsp;<a href="javascript:void(0)" class="collapsed moretext">'
                + moretext
                + '</a><a href="javascript:void(0)" class="expanded lesstext">' 
                + lesstext
                + '</a>'
    $(element).html(html);
}

$(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();
});