jquery 展开和折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10478269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery Expand and collapse
提问by user1379075
I'm trying to replicate the effect of the Cloudania Citizens page, found here:
我正在尝试复制 Cloudania Citizens 页面的效果，在此处找到：
http:// cloudania.com/citizens/
http://cloudania.com/citizens/
I'm only looking for its basic effect of expanding and collapsing when you click on an image.
我只是在寻找单击图像时扩展和折叠的基本效果。
I've been using jQuery-Collapse by webcloud but I can't get the images to stay inline.
我一直在使用 webcloud 的 jQuery-Collapse，但我无法让图像保持内联。
So I want it to look like this upon opening the page
所以我希望它在打开页面时看起来像这样
http://i.stack.imgur.com/Lva48.png
http://i.stack.imgur.com/Lva48.png
Then box 1 is clicked and it then looks like:
然后单击框 1，它看起来像：
http://i.stack.imgur.com/SSAfV.png
http://i.stack.imgur.com/SSAFV.png
Thanks for your help
谢谢你的帮助
回答by Dave Homer
I know going to Jquery's site is really boring, but the simpler you work is the better. Try using slide toggle and a good css and you can easily achieve this. more info on slide toggle can be found here: http://api.jquery.com/slideToggle/.
我知道访问 Jquery 的站点真的很无聊，但工作越简单越好。尝试使用滑动切换和良好的 css，您可以轻松实现这一目标。有关滑动切换的更多信息，请访问：http: //api.jquery.com/slideToggle/。
- You need to have each box onClick to slide-toggle the content1,
- You need to have all 7 different contents in content 1 as absolute position and hidden / dispaly:none;
- Then also on each box onClcick you need to tell it to show the related hidden div.
- In case any box on another row is clicked, you need to slide-toggle the other open content1 to close.
- 您需要让每个框都 onClick 滑动切换内容 1，
- 您需要将内容 1 中的所有 7 个不同内容作为绝对位置和隐藏/显示：无；
- 然后还在每个框 onClcick 上告诉它显示相关的隐藏 div。
- 如果单击另一行上的任何框，则需要滑动切换其他打开的 content1 以关闭。
Simple.
简单的。
回答by jazzytomato
This is easy with jquery, use slideDown() to show a div :
这对于 jquery 很容易，使用 slideDown() 来显示一个 div ：
http://api.jquery.com/slideDown/
http://api.jquery.com/slideDown/
And slideUp() to hide
和 slideUp() 隐藏
