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

}）;

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

2 个答案: