javascript - jQuery 动画 div 点击时向上向下

Question

所以我有这个 HTML

<div id="one">One</div>
<div id="two">Two   <br/> <br/>
   Two
</div>
<div id="three">Three</div>
<div id="four">Four   <br/> <br/>
   Four   <br/> <br/>
   Four
</div>

jQuery:

$(document).ready(function () {
    $("#two").hide();
    $("#four").hide();
    $("#one").click(function () {

        $("#four").slideUp("slow", function () {

        });
        $("#three").slideToggle("slow,", function () {

        });

        $("#two").slideToggle("slow", function () {

        });
    });

    $("#three").click(function () {
        $("#four").slideToggle("slow,", function () {});
    });
});

我想做的是将第一和第三分区显示在另一个分区下。

当我单击第一个分区时，我希望显示第二个分区(动画)，第三个分区(以及第四个分区，如果也单击第三个分区)将位置移动到第二个分区下(具有相同的动画)。

当我再次单击第一个分区时，我希望第二个分区隐藏(动画)，第三个分区(如果单击第三个分区，则第四个分区)返回到之前的位置。

这是 JSFiddle: http://jsfiddle.net/6ynnR/

Answer 1

看起来你想要这样的东西:EXAMPLE HERE

更新了 jQuery:

$("#two, #four").hide();

$("#one").click(function () {
    $("#two").slideToggle(function () {
        $("#four").slideUp();
    });
});

$("#three").click(function () {
    $("#four").slideToggle(function () {
        $("#two").slideUp()
    });
});

或者，这是另一种方法:EXAMPLE HERE