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

感谢您的反馈。

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

（文档）$。就绪（函数（）{

喜欢@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
        );
    });
});

谢谢你们：）

当另一个切换激活时取消切换？

1 个答案: