jquery展开和折叠

Question

我正在尝试复制 Cloudania Citizens 页面的效果，可在此处找到：

http://cloudania.com/citizens/

我只是在寻找它在您单击图像时展开和折叠的基本效果。

我一直在使用 webcloud 的 jQuery-Collapse，但我无法让图像保持内联。

所以我希望它在打开页面时看起来像这样

http://i.stack.imgur.com/Lva48.png

然后单击框 1，然后它看起来像：

http://i.stack.imgur.com/SSAfV.png

感谢您的帮助

Answer 1

我知道访问 Jquery 的网站真的很无聊，但工作越简单越好。尝试使用滑动切换和良好的 css，您可以轻松实现这一点。更多关于滑动切换的信息可以在这里找到：http://api.jquery.com/slideToggle/。

1. 您需要让每个框都单击以滑动切换内容1，
2. 您需要将内容 1 中的所有 7 个不同内容作为绝对位置并隐藏/显示：无；
3. 然后还需要在 onClcick 的每个框上告诉它显示相关的隐藏 div。
4. 如果单击另一行上的任何框，您需要滑动切换其他打开的内容1 以关闭。

简单。

Answer 2

使用 jquery 很容易，使用 slideDown() 来显示一个 div：

http://api.jquery.com/slideDown/

并用 slideUp() 隐藏