【问题标题】:jquery Expand and collapsejquery展开和折叠
【发布时间】:2012-05-15 17:39:40
【问题描述】:

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

http://cloudania.com/citizens/

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

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

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

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

然后单击框 1,然后它看起来像:

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

感谢您的帮助

【问题讨论】:

    标签: jquery expand collapse


    【解决方案1】:

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

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

    简单。

    【讨论】:

    • 谢谢。我现在正在努力解决这个问题!干杯
    【解决方案2】:

    使用 jquery 很容易,使用 slideDown() 来显示一个 div:

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

    并用 slideUp() 隐藏

    【讨论】:

    • 但是如果我展开全宽 div,内联图像不会保持内联,它们会环绕它
    猜你喜欢
    • 1970-01-01
    • 2011-12-06
    • 2012-08-31
    • 1970-01-01
    • 1970-01-01
    • 2011-09-12
    • 1970-01-01
    • 2012-01-14
    • 2018-12-13
    相关资源
    最近更新 更多