javascript - 使所有 包装器具有相同的高度，除非单击 'read more'

Question

我实际上是在尝试使两个单独列中的一堆 div 标记在页面加载时均匀排列。因此，例如，左列有 10 个单独的“ block ”，右列也有相同的。最初加载时，我希望每个 block 都是 200 像素高，除非单击“阅读更多”按钮以展开内容。我目前有:

<style type="text/css">.collapse { height: 200px; overflow: hidden; }</style>
<div id="100" class="collapse">
Paragraph content</div>
<a class="vipBUTTON" onclick="document.getElementById('100').style.height = '100%';document.getElementById('100').style.overflow = 'visible';">Read more</a>

我的“折叠”类目前有 200 像素高，并设置了溢出:无，所以这基本上可以工作 - 但一旦打开就无法关闭，从整体页面的 Angular 来看，管理起来会很痛苦，因为每个扩展 block 将需要一个唯一的 ID。

关于如何从大范围的 Angular 简单地做到这一点有什么想法吗？有时每列可能有 30-40 个方 block ，它们应该全部水平排列，就像方 block 堆叠在一起(除非它们被打开)。

**我还应该注意，我不能用典型的预建功能来做到这一点，因为每个 block 都包含在一个表元素中，因为它们是由 CMS 生成的——而且它需要非常容易管理因为客户会这样做。 :-/

---

这是我正在使用的 fiddle :http://jsfiddle.net/uazd010m/

---

Answer 1

http://jsfiddle.net/uazd010m/4/

提供的 JS fiddle 改变了您执行 a 的方式链接。我不将它们用于 javascript 或 jQuery 函数。我认为它们非常不可靠且具有局限性。我还添加了 jQuery，因此如果您不使用 jQuery，则需要添加一个有效的库。可以单独使用 Javascript，但我深表歉意。我不认为这是正确的解决方案。

我还添加了一些 CSS。我添加了一个 vertical-align为你的td基本 CSS，小写 .BUTTON (反射(reflect)在将 HTML 从 <a class="BUTTON">... 更改为 <button class=".button">... ......您需要调整您的 css 以获得更好看的样式，但这只是一个意见。

如有需要，请提出问题。