Javascript 打开上方的div时，使div向下滑动（未打开）

这是我的问题——我还不太精通编程，所以请耐心点：

---

我想在我的页面上有一个对象列表，每个对象都作为一个开关来打开一个div。这部分我已经完成了！我搞不懂的是如何使打开的对象下面的div滑到新打开的div下面。目前，它们只是坐在打开的div内内容的顶部。谢谢

它被称为手风琴效果。查看jQueryUI的手风琴效果

---

这是一个非常简单的手风琴效果版本，我刚刚用jQuery创建了它

您所询问的效果已经通过jQuery javascript库提供。抽象提供了效果

来自jqueryui.com：

<!-- this is the format of the html markup needed -->
<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

第一内容
第二内容

及

//以及它的JavaScript代码
$（函数（）{
$（“#手风琴”）。手风琴（）；
});

请不要使用JQuery UI，如果它只用于小项目。您可以使用常规方法关闭单击触发器时已打开的所有面板，并打开最靠近“下一步”按钮的面板：

$(function() {
    // Hide all panels
    $('#accordion .content').hide();
    // Add active class to the first trigger, then find the next panel and open with .slideDown() effect
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    // When the trigger is clicked...
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Remove all "active" classes and close all the panels that has been opened.
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            // Open one panel that placed right next to the trigger
            // only if the next panel is hidden
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

以下是一个例子：

---

希望有帮助：）

不要使用绝对定位；让您的内容堆叠（

position:static

——默认值或

position:relative

）。我添加了jQuery标记，假设这就是您用于动画的内容。如果没有，请删除并澄清您是如何实现“打开开关”的。

$(function() {
    // Hide all panels
    $('#accordion .content').hide();
    // Add active class to the first trigger, then find the next panel and open with .slideDown() effect
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    // When the trigger is clicked...
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Remove all "active" classes and close all the panels that has been opened.
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            // Open one panel that placed right next to the trigger
            // only if the next panel is hidden
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});