尝试使用变量来缩短我的jquery

Question

我正在尝试使用变量来缩短以下代码(这是可行的)。它看起来很多余，所以是的。

<script type="text/javascript">
$(document).ready(function(){
    $("div.first").click(function()
    {
        if ($('#firsthidden').css('display') == "block")
        {
            $("#firsthidden").hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }
        else
        {
            $("#firsthidden").show("blind", "slow");
            $("div.outer").animate({height:390},"slow");
        }
        if ($('#secondhidden').css('display') == "block")
        {
            $("#secondhidden").hide("blind", "slow");
        }
        if ($('#thirdhidden').css('display') == "block")
        {
            $("#thirdhidden").hide("blind", "slow");
        }
    });
    $("div.second").click(function()
    {
        if ($('#secondhidden').css('display') == "block")
        {
            $("#secondhidden").hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }
        else
        {
            $("#secondhidden").show("blind", "slow");
            $("div.outer").animate({height:390},"slow");
        }
        if ($('#firsthidden').css('display') == "block")
        {
            $("#firsthidden").hide("blind", "slow");
        }
        if ($('#thirdhidden').css('display') == "block")
        {
            $("#thirdhidden").hide("blind", "slow");
        }
    });
    $("div.third").click(function()
    {
        if ($('#thirdhidden').css('display') == "block")
        {
            $("#thirdhidden").hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }
        else
        {
            $("#thirdhidden").show("blind", "slow");
            $("div.outer").animate({height:390},"slow");
        }
        if ($('#secondhidden').css('display') == "block")
        {
            $("#secondhidden").hide("blind", "slow");
        }
        if ($('#firsthidden').css('display') == "block")
        {
            $("#firsthidden").hide("blind", "slow");
        }
    });

});
</script>

所以我试着用变量来缩短这个过程。我已经把代码逻辑写下来了，所以我猜这是一个语法/格式问题。这是我的尝试：

<script type="text/javascript">
var x = null;
var a = null;
var b = null;

$(document).ready(function(){
    $("#first").click(function()
    {
        x = $("#firsthidden");
        a = $("#secondhidden");
        b = $("#thirdhidden");
    });
    $("#second").click(function()
    {
        x = $("#secondhidden");
        a = $("#firsthidden");
        b = $("#thirdhidden");
    });
    $("#third").click(function()
    {
        x = $("#thirdhidden");
        a = $("#firsthidden");
        b = $("#secondhidden");
    });
    $("div.clicked").click(function()
    {
        if (x.css('display') == "block")
        {
            $(x.hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }
        else
        {
            x.show("blind", "slow");
            $("div.outer").animate({height:390},"slow");
        }
        if (a.css('display') == "block")
        {
            a.hide("blind", "slow");
        }
        if (b.css('display') == "block")
        {
            b.hide("blind", "slow");
        }
    });
});
</script>

Answer 1

 $("div.clicked").click(function()
    {
        if (x.css('display') == "block")
        {
            $(x.hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }

需要的是

 $("div.clicked").click(function()
    {
        if (x.css('display') == "block")
        {
            x.hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }

Answer 2

尝尝这个。

$(document).ready(function(){
    $("#first").click(function()
    {
        MyFunction($("#firsthidden"), $("#secondhidden"), $("#thirdhidden"));
    });
    $("#second").click(function()
    {
        MyFunction($("#secondhidden"), $("#firsthidden"), $("#thirdhidden"));
    });
    $("#third").click(function()
    {
        MyFunction($("#thirdhidden"), $("#secondhidden"), $("#firsthidden"));
    });
    function MyFunction(x, a, b)
    {
        if (x.css('display') == "block")
        {
            $(x.hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }
        else
        {
            x.show("blind", "slow");
            $("div.outer").animate({height:390},"slow");
        }
        if (a.css('display') == "block")
        {
            a.hide("blind", "slow");
        }
        if (b.css('display') == "block")
        {
            b.hide("blind", "slow");
        }
    });
});

Answer 3

如果你想要像选项卡式内容这样的东西。有一些插件，你也可以自己写。可能是类似于这个http://jsfiddle.net/XYGHQ/6/的东西