在文本单击时展开div以获得五个单独的div

Question

我有一个这样的结构：

<h3>Text</h3>
<p>(text from CSS)</p>
<div>hidden content goes here</div>

它会转五次（五个标题和五个div）。

在CSS中，我为类定义了：“展开”和“折叠”（展开和折叠内容属性，因为当我单击段落时，文本在展开和再次单击时折叠）。因此，当内容折叠时，我有“展开”文本来单击，当展开时，我有“折叠”文本。

问题是，我使用的脚本只支持一个div。当我对五个div执行相同的技巧时，我有一个问题，因为所有的，五个div都在一次展开/折叠。

我在接近身体关闭标记时使用了这段代码：

$('.expand').simpleexpand();

和此脚本：https://raw.githubusercontent.com/redhotsly/simple-expand/master/src/simple-expand.min.js

有没有人能解释一下我需要做什么，这样它就能为那些div单独工作了？

另外，我使用的是fullpage.js脚本，它会破坏页面滚动（文本会在该部分下方，转到下一个幻灯片，就像代码不能读取该部分应该有一个流体高度……)。

谢谢你的帮助。

编辑：好吧，我终于想通了。内容应放在其他单独的div：

<h3>text</h3>
<div>
<p>(text from CSS)</p>
<div>hidden content</div>
</div>

但我仍然有问题，扩展的文本使节的高度变大，它“吃掉”了其余的内容（滚动条不显示，溢出隐藏）。

图片:http://take.ms/f2oxa

Answer 1

尝试对每个元素调用一次扩展库：

$('.expand').each(function() {
    $(this).simpleexpand();
});