展開/摺疊HTML中的文本 - Javascript

Question

我試圖讓'See More'（展開）和'See Less'（摺疊）的JavaScript代碼工作。我將循環並在HTML中的每個類實例上調用此JavaScript代碼。

這實際上是第一次出現在頁面上。我把Console.logs看到它能正常工作。即每次點擊「See More」時，控制檯將打印一次「展開/摺疊」。

但是，設備的每個附加實例（在頁面上的另一段文本上）都不會展開。

會發生什麼情況是，在第二種情況下，控制檯打印 - 「展開，摺疊」。所以它實際上是即時的（這意味着它根本不會擴展）。

第三，它打印 - 「展開，摺疊，展開，摺疊，展開，摺疊」。幾乎像指數增長......任何想法？

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

編輯：

我跟着羅伯託利納雷斯格式和重建函數，如下所示：

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

與H羅伯特·利納雷斯的ELP，我固定的代碼，像這樣的工作：

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

}）;