如何显示溢出:隐藏的内容使用jQuery / JS当用户点击一个图像

How to show the overflow:hidden content using jQuery / JS when a user clicks on an image?

本文关键字：用户 JS 图像 一个 jQuery 溢出 显示 何显示 隐藏      更新时间：2023-09-26

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

此外，我想给他们一个选项，点击一个小图标，像一个加号+，以查看其余的帖子预览在我的页面。

你可以在http://jsfiddle.net/BLUzJ/上看到我设置了一个max-height和overflow:hidden，如果后预览的内容超过这个。95%的后预览都隐藏了大量的文本。

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

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

当一个图标在文章(我猜会在一个角落的文章预览)被点击，最大高度改变，允许用户阅读其余的

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

谢谢你的想法和例子。

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

  • 添加了一个类为.toggle的元素，它可以是你的图标
  • 添加#text.expanded的css规则，删除max-height
  • jquery从元素#text中添加/删除类expanded

这是一个开始小提琴。它在单击文本时展开。显然，您需要做更多的工作来创建一个展开/折叠部分的触发器。

http://jsfiddle.net/BLUzJ/10/

要显示帖子的所有内容，您可以将其图标被单击的元素的max-height设置为auto。一旦掌握了希望展开的元素(通过使用document.getElementById("id")或遍历DOM)，就可以通过以下操作设置该属性:

x.style.maxHeight = "none";

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

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

相关文章：