激活另一个切换时取消切换？答案

【问题标题】：Cancel toggle when another toggle is activated?激活另一个切换时取消切换？
【发布时间】：2012-09-12 06:46:05
【问题描述】：

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

谢谢:)

【问题讨论】：

你不需要多个$(document).ready(function(){
你可以试试这个api.jquery.com/stop
欢迎来到 SO！如果您将代码添加到 jsfiddle.net 上的新 Fiddle 中，您可能会更幸运地获得快速答案。确保包含任何相关的 HTML 和 CSS（如果可以的话，创建一个最小的测试用例）！
附带说明，请注意切换功能api.jquery.com/toggle-event 已弃用，可能会在任何未来版本中删除。

标签： jquery jquery-animate height toggle opacity

【解决方案1】：

感谢大家的反馈。

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

$(document).ready(function(){

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

.切换

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

谢谢大家:)

【讨论】：