如何显示溢出：当用户点击图像时使用jQuery/JS隐藏的内容？

我正在构建供稿阅读器，并在我的第一页上显示了大量的帖子预览。用户可以选择点击标题并访问源链接。如何显示溢出：当用户点击图像时使用jQuery/JS隐藏的内容？

另外我想给他们点击一个小图标的选项，比如加号+来查看我页面中的其他帖子预览。

正如你可以在http://jsfiddle.net/BLUzJ/上看到的，如果post预览的内容超过这个，我已经设置了max-height和overflow:hidden。 95％的帖子预览有很多隐藏的文字。

对于现在的最大高度设置为10.3em如下

#text { 
    max-height:10.3em; 
    overflow:hidden; 
}

当单击后（我猜会有在后预览的角落）的图标时，MAX-高度更改以允许用户阅读其余部分。

我的应用程序是用PHP编写的，我从RSS提要中获得标题，图像和内容。我认为这是一个jQuery，JavaScript解决方案，但我不知道该怎么做。

谢谢你的想法和例子。

2011-09-21 Jeksiliki

使用jQuery，因为您添加了标签：http://jsfiddle.net/r4F8Q/3/

2011-09-21 20:06:34

这看起来不错！正如你可能会注意到我会有很多'

...

'这是如何影响我使用#text的事实？ – Jeksiliki

啊，你应该使用类然后。每页应该只有一个#id。但至于jquery链...'.closest（）'会给你最近的匹配祖先（http://api.jquery.com/closest/），所以它只会抓住＃＃文本'的父母。切换“ - 没有其他人。 –

...澄清...被单击的'.toggle'的父级。 –

要显示帖子的所有内容，可以将图标已被点击的元素的max-height设置为自动。一旦你（通过使用document.getElementById("id")或通过遍历DOM）得到你希望扩大元素的保持，可以通过执行设置该属性如下：

x.style.maxHeight = "none";

您可以设置此为onclick事件如果你愿意，可以扩展图标。请注意，这不会影响扩张。为此，你应该使用类似jQuery的东西。

编辑：更新了jsFiddle的一个简单的例子，当标题被点击时展开。 http://jsfiddle.net/BLUzJ/6/

2011-09-21 19:49:57

这将是非常有用的，如果你更新我的jsFiddle更好的理解... – Jeksiliki

这是一个首发小提琴。它在点击文本时扩展。您显然需要做更多的工作才能获得展开/折叠该部分的触发器。

2011-09-21 19:56:14 BNL

回答