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 () {});
    });
});

我想做的是顯示div一和三一。

當我單擊div 1時，我要顯示div（動畫），並要使div 3（和div 4，如果也單擊div 3，則要顯示div）以在div 2下移動位置（具有相同的動畫）。

當我再次單擊div時，我要使div 2隱藏（動畫）和div 3（如果單擊div 3，則要划分div 4）以返回到以前的位置。

這是JSFiddle： http : //jsfiddle.net/6ynnR/

Answer 1

您似乎想要這樣的東西： 此處示例

更新的jQuery：

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

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

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

或者，這是另一種方法：在此示例

Answer 2

只需刪除以下代碼，您就可以開始：D

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

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

    });

Answer 3

希望這對您有用，

我添加了條件語句：

if(($("#two").is(":visible"))&&($("#four").is(":visible"))){

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

    }

並刪除了兩個功能：

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

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

http://jsfiddle.net/uY73z/19/