Javascript 如何在用户单击图像时使用jQuery/JS显示溢出：隐藏内容？

我正在构建一个提要阅读器，在我的第一页上，我展示了很多帖子预览。用户可以选择单击标题并访问源链接

此外，我想让他们选择点击一个小图标，比如加号

+

，在我的页面中查看文章预览的其余部分

正如您在上看到的，如果后期预览的内容超过此值，我已设置了

max height

和

overflow:hidden

。95%的后期预览都隐藏了大量文本

目前，最大高度设置为10.3em，如下所示

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

当点击帖子中的一个图标（我猜在帖子预览的一角会有）时，最大高度会发生变化，允许用户阅读其余的内容

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

---

感谢您的想法和示例。

要显示文章的所有内容，您可以将其图标已单击的元素的

最大高度设置为“自动”。获得要扩展的元素后（通过使用
document.getElementById（“id”）
或通过遍历DOM），可以通过执行以下操作设置此属性：

x.style.maxHeight = "none";

如果愿意，可以将其设置为展开图标的
onclick
事件。请注意，这不会设置展开动画；为此，您可能应该使用类似jQuery的东西

编辑：用一个简单的示例更新了JSFIDLE，单击标题时该示例将展开
 这是一把起始小提琴。它会在单击文本时展开。显然，您需要做更多的工作，才能有一个扩展/折叠该部分的触发器

使用jquery，因为您添加了该标记：


添加了一个类为
.toggle
的元素，该元素可能是您的图标
添加了
#文本的css规则。展开了
，删除了
最大高度

jquery从元素
#文本

看起来很棒！正如您可能注意到的，我将有许多
。
这对我使用#text有什么影响？啊，那么您应该使用类。每页只能有一个#id。但是对于jquery链
.closest（）
将为您提供最接近的匹配祖先（），因此它将只获取
#文本，该文本是
的父级。切换
--其他任何一个都不…，以澄清。。。被点击的
.toggle
的父项。愚蠢的jsfiddle把我吸进去了。更多细节：——只是为了好玩。