0

我在使用一些简单的代码时遇到了（可能是不必要的）麻烦。我有 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);
    });
});

谢谢 ：）

4

1 回答 1

0

谢谢你们的反馈。

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

$(文档).ready(函数(){

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

.toggle

@François Wahl 建议的活动。

结果是这样的：

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

多谢你们 ：）

于 2012-09-20T10:10:49.333 回答