我有一个这样的结构:
<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
尝试对每个元素调用一次扩展库:
$('.expand').each(function() {
$(this).simpleexpand();
});