jQuery：閱讀更多/更少滑動切換？

我經過一個簡單的滑動切換爲一個閱讀更多的鏈接，然後擴大一個閱讀較少的鏈接。jQuery：閱讀更多/更少滑動切換？

完全像this但需要滑下來，而不是像那樣出現。

無論是通過單詞還是盒子高度，都需要設置初始高度。

任何想法，實現起來相當簡單嗎？

感謝所有幫助:)

來源

2012-01-13 Jezthomp

爲什麼你不試圖按照你所鏈接的教程並通過slideToggle（）更改toggle（）？ – Miquel 2012-01-13 11:30:43

看看@here http://www.w3schools.com/jquery/eff_slidetoggle.asp

來源

2012-01-13 11:38:17 coolguy

你提到使用切換（）函數，它只是顯示或隱藏元素的例子（顯示：塊/隱藏），而不任何效果。

您必須使用slideToggle（）函數，它具有相同的功能，但具有滑動效果。

$("button").click(function(){ 
    $("p").slideToggle(); 
});

來源

2012-01-13 11:42:58

感謝球員們，我需要'閱讀更多'來改變'閱讀更少'我已經找到了一些點擊幻燈片上下滑動的例子，但需要真正改變。 – Jezthomp 2012-01-13 13:24:49

你可以使用內置的功能jQuery的到.slide（）或動畫（）

因此而不是使用的：

$('#someElement').html('some content');

嘗試

$('#someElement').html('some content').slideDown(some speed ie 600);

你會需要首先隱藏（即顯示：無）內容區域。也許包裝內容在一個ID /類的div和設置，以顯示：無

來源

2012-01-13 11:46:59 atmd

遲到但從來沒有，我覺得這個插件是非常有用的。有噸的偉大的選擇和非常靈活的

http://plugins.learningjquery.com/expander/

來源

2012-11-20 07:40:39 Naveen

如果您的文本超出一行以上，「more」文本前會出現換行符。壞。 – oyvey 2014-05-14 05:36:26

這是簡單而有效。

$(".button").click(function(){ 
    var moreAndLess = $("p").is(':visible') ? 'More' : 'Less'; 
    $(this).text(moreAndLess); 

    $("p").slideToggle(); 
});

來源

2012-12-12 05:22:17 Christopher

jQuery：閱讀更多/更少滑動切換？

回答

相關問題