激活另一个切换后是否取消切换？

Question

我有一些简单的代码（可能是不必要的）麻烦。 我有3张图片，点击后打开下面的三个div之一。 我只是希望能够取消任何先前打开的div上的切换，以便在任何给定时间只能打开一个。

目前的问题是，当第二次单击一个按钮时，什么也没有发生，因为它取消了切换，而不是打开div。 正如您可能会从我的糟糕措辞中看出的那样，我对此还很陌生，所以请客气！

设置css以便div的高度和不透明度从0开始。

码：

$(document).ready(function() {
    $("#picone").toggle(function() {
        $("#divone").animate({
            height: 400,
            opacity: 1
        }, 500);
        $("#divtwo, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    }, function() {
        $("#divone").animate({
            height: 0,
            opacity: 0
        }, 500);
        $("#divtwo, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    });
});

$(document).ready(function() {
    $("#pictwo").toggle(function() {
        $("#divtwo").animate({
            height: 400,
            opacity: 1
        }, 500);
        $("#divone, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    }, function() {
        $("#divtwo").animate({
            height: 0,
            opacity: 0
        }, 500);
        $("#divone, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    });
});

$(document).ready(function() {
    $("#picthree").toggle(function() {
        $("#divthree").animate({
            height: 400,
            opacity: 1
        }, 500);
        $("#divone, #divtwo").animate({
            height: 0,
            opacity: 0
        }, 500);
    }, function() {
        $("#divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
        $("#divone, #divtwo").animate({
            height: 0,
            opacity: 0
        }, 500);
    });
});

谢谢 ：）

Answer 1

谢谢你们的反馈。

事实证明，切换功能并不是我想要的。 我删除了多余的

$（document）.ready（function（）{

就像@hsalama建议的一样，并将

.toggle

像@FrançoisWahl建议的活动。

结果如下：

$(document).ready(function(){
    $("#picone").click(function() {
        $("#divone").animate(
            {height:300, opacity:1}, 500
        );
        $("#divtwo, #divthree").animate(
            {height:0, opacity:0}, 500
        );
    });

    $("#pictwo").click(function() {
        $("#divtwo").animate(
            {height:300, opacity:1}, 500
        );
        $("#divone, #divthree").animate(
            {height:0, opacity:0}, 500
        );
    });

    $("#picthree").click(function() {
        $("#divthree").animate(
            {height:300, opacity:1}, 500
        );
        $("#divone, #divtwo").animate(
            {height:0, opacity:0}, 500
        );
    });
});

多谢你们 ：）