jquery - 閱讀更多，顯示/隱藏html內容

我想在jQuery中實現一個簡單的閱讀更多功能，我可以切斷一些內容，然後使用按鈕顯示/隱藏餘數。jquery - 閱讀更多，顯示/隱藏html內容

如果它是一個簡單的文本塊，我可以簡單地將餘數包裝在一個範圍內，但內容可以是html。

例如：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in</p> 
<p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

在這個例子中我想在標記切斷--Cut OFF這裏 - 其中在所述第一p的中間。但是，它可能不在p中，也可能沒有html。我只需要迎合它應該在那裏

這是如何實現的？

來源

2013-05-21 Marty Wallace

這可能是最好的，我想，如果你以某種方式禁止'--Cut在這裏下車 - '從HTML元素的內部出現。 – Blazemonger

是的，這只是爲了說明問題 –

中的分界點展開和摺疊HTML內容：https：//github.com/kswedberg/jquery-expander –

http://jsfiddle.net/mblase75/65u5R/

這是一個有點複雜的解決方案。結果是，您正在使用.html()將前半部分內容附加到HTML元素，並讓jQuery爲您關閉它。然後點擊「read more」鏈接時，再次使用.html()來填充整個字符串的HTML元素，減去「--CUT OFF HERE--」段。

var allstr = "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in</p><p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>", 
    $container = $('#container'), 
    splitstr = "--CUT OFF HERE--", 
    arr_str = allstr.split(splitstr), 
    fstr = (arr_str[0] === allstr) ? allstr : arr_str[0]+"...", 
    readmore = "<a href='#'>Read more</a>"; 

$container.html(fstr); 

$(readmore).on('click',function(e) { 
    e.preventDefault(); 
    $(this).parent().html(arr_str.join('')); 
}).appendTo($container);

來源

2013-05-21 18:33:43 Blazemonger

-1

不知道這是否真的是你要找的。看看下面的代碼：。

<p>Click the button to show or hide the content below <input id="button" type="button" value="Read More" /> </p> 

<p id="show_hide" style="display:none;">This content will show and hide on click</p>

（函數（）{ $（ '＃按鈕'）點擊（函數（）{ $（ '＃show_hide'）切換（300）; }） }）（jQuery）;

沒有什麼特別這裏真的。我最初隱藏了當用戶點擊按鈕時應該顯示的'show/hide'段落。內聯CSS僅用於此問題。否則，專家建議你寫你的CSS在外部文件......然後我用在點擊事件處理切換（）功能，使動畫發生......

看到這裏的小提琴： http://jsfiddle.net/wuGbh/

來源

2013-05-21 18:54:13 Mosire

-1

首先，您不應該在html中顯示文本，也不要在任何html標記中包裝它。有各種各樣的方式來包裝你的任何HTML標籤，div，p，span等文本。所以這裏是我的假設你的文本包裝是div或任何帶有classname response_text的標籤。

<div class="response_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in</div> 

.show_me { 
    display:none; 
} 

function makeToggle(ele){ 
    var html = $("." + ele).html(); 
    var textarray = html.split("--CUT OFF HERE--"); 
    var p = $("<p />").text(html).addClass("hide_me"); 
    var p1 = $("<p />").text(textarray[0]).addClass("show_me"); 
    var brn = $("<button />").click(function(){ 
    $(".hide_me").hide(); 
    $(".show_me").show(); 
    }).text("hide me").addClass("hide_me"); 
    var brn1 = $("<button />").click(function(){ 
    $(".show_me").hide(); 
    $(".hide_me").show(); 
    }).text("show more").addClass("show_me"); 
    $("." + ele).html("").append(p).append(p1).append(brn).append(brn1); 
} 
makeToggle("response_text");

http://jsfiddle.net/NNMh3/16/

來源

2013-05-21 19:00:06 PRP

jquery - 閱讀更多，顯示/隱藏html內容

回答

相關問題