單擊/切換以顯示更多

Question

我有一些內容只需要顯示幾行內容以及「閱讀更多」按鈕，然後當用戶單擊閱讀更多按鈕時，其餘內容將會內容div下降（擴展其高度），然後閱讀更多按鈕將被替換爲「關閉」。

有誰知道任何jsfiddle演示或類似的事情的例子教程？

感謝您的幫助！

保羅

Answer 1

有一個簡單的jQuery插件按您的要求。

它會自動縮短元素中的文本並添加「更多」鏈接。一旦顯示完整的文字，也顯示「少」鏈接。

用法：

縮短 '元素' 中的文本，並添加 '更多' 鏈接。

$(element).shorten(); 

在縮短元素內容的同時添加包含文本'read more'的鏈接。

$(element).shorten({ 
    moreText: 'read more' 
}); 

將鏈接文本更改爲'更多'和'更少'覆蓋默認值'更多'和'更少'。

$(element).shorten({ 
    moreText: 'read more', 
    lessText: 'read less' 
}); 

覆蓋默認顯示100個字符並隱藏超過50個字符的文本。

$(element).shorten({ 
    showChars: '50', 
}); 

有關更多詳細信息，請參閱this link。你

也可以指你的內容相同here

Answer 2

你有兩個選擇.... 要麼加載額外的內容到具有一個div ..

display: none; 

負載，然後使用jQuery

.show() 

到當按鈕被點擊時顯示內容。

如果你有大量的數據或者可能使用的圖像，並且帶有AJAX調用的jQuery將數據加載到div中。當我這樣做時，我會使用一個空白的div來準備加載內容。

Answer 3

您可能想要類似this。

它使用jQuery的slideToggle()方法。如果你不想要它幻燈片然後只使用toggle()。請注意，long-text元素首先具有display: none樣式設置。

參考：https://api.jquery.com/slideToggle/

Answer 4

基本結構的演示，讓您可以啓用此功能。

<div class="more-less"> 
    <div class="more-block"> 
     <p>The Content</p> 
    </div> 
</div> 

任何你放入「更多塊」的div將是可擴展的。 「more-less」div用於保存More/Less鏈接和[...]，它使用jQuery添加，爲您節省添加這些小部分的時間。

$(function() { 

    // The height of the content block when it's not expanded 
    var adjustheight = 80; 
    // The "more" link text 
    var moreText = "+ More"; 
    // The "less" link text 
    var lessText = "- Less"; 

    // Sets the .more-block div to the specified height and hides any content that overflows 
    $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden'); 

    // The section added to the bottom of the "more-less" div 
    $(".more-less").append('<p class="continued">[&hellip;]</p><a href="#" class="adjust"></a>'); 

    $("a.adjust").text(moreText); 

    $(".adjust").toggle(function() { 
     $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible'); 
     // Hide the [...] when expanded 
     $(this).parents("div:first").find("p.continued").css('display', 'none'); 
     $(this).text(lessText); 
    }, function() { 
     $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden'); 
     $(this).parents("div:first").find("p.continued").css('display', 'block'); 
     $(this).text(moreText); 
    }); 
}); 

這裏是演示.. http://jsfiddle.net/9FLx5/

Answer 5

這裏是一個demo使用slideToggle

HTML：

Bla bla bla 
<div id="content" style='display:none'>more bla bla bla bla</div> 
<div id="click-me">more ...</div> 

的JavaScript/JQuery的：

$(document).ready(function() { 
    $("#click-me").click(function() { 
     var moreOrless = $("#content").is(':visible') ? 'more ...' : 
          ' less'; 
     $(this).text(moreOrless); 
     $("#content").slideToggle(); 
    }); 
});