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

Question

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

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

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

在第二种情况下，控制台会打印 - “展开，折叠”。所以它实际上是瞬间完成的（这意味着它根本不会扩展）。

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

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

}

这是遍历每个类的 JQuery 代码：

$(function () {
    $.each($(".limitedTextSpace"), function(index, value) {
        showMoreLess(value);
    });
});

编辑：

我按照 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);
}

}

然后我对另一个循环函数也做了一些小改动：

    $(function () {
    $.each($(".limitedTextSpace"), function(index, value) {
        showMoreLess(value);
    });

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

但是，现在出现了文本中何时出现中断的问题。该代码将同一文本的每一段解释为不同的展开/折叠实例 - 意思是一段文本不是一个展开/折叠，而是每个段落有多个。

Answer 1

在第二次及以后的时间里它根本不会展开，因为当您用折叠的内容替换它时，您已经丢失了完整的内容。发生这种情况是因为您永远不会将完整的内容暂时“保存”到别处，以便在单击展开链接时将其放回原处。

我建议您更改 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>

Javascript：

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

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

工作 JSFiddle：http://jsfiddle.net/susxK/

Answer 2

在 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);
}

}

并且在文档准备好时的单独函数中：

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

});