在文本单击上展开div以获取五个单独的DIV

Question

我有这样的结构：

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

它有五次（五个标题和五个DIV）。

在CSS中，我已经定义：在“扩展”和“折叠”类之后（展开并折叠CONTENT属性，因为当我单击段落时，文本正在展开并在我再次单击时折叠）。所以我在展开内容时“展开”文字以便点击，展开后我会“折叠”。

问题是，我使用的脚本只支持一个DIV。当我为五个DIV做同样的技巧时，我遇到了一个问题，因为所有五个DIV一次都在扩展/折叠。

我在BODY结束标记附近使用此代码：

$('.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();
});