jQuery设置一个Div的动画使其向下移动，而另一个Div设置动画使其向上移动

我的页面上有3个div，A、B和C。当我单击A时，我希望它向上移动200px并添加类“active”，当我再次单击它时，它向下移动并删除活动类。我已经设法做到了这一点，但是，我现在需要使它只有一个div是活动的，所以如果一个div是向上的（或“活动”），我点击另一个，则“活动”div首先向下移动，然后另一个div向上移动

例如，如果A处于活动状态，我单击B，A必须先向下移动，然后B再向上移动

这是我移动div的代码（您将看到还有一个“close_a”元素，它只是一个十字，也可以关闭div）：

---

因此，我现在的问题是，我如何使它在一个打开时，我点击另一个，它首先关闭打开的一个。

我想我已经找到了一个答案……尽管必须有一个较短的方法来做到这一点（我将a、B和C分别改为谁、什么和为什么）：

---

使用此链接可能会对您有所帮助。嗨@Sandy，恐怕这有点超出我的理解范围，谢谢您提供的链接，尽管我以您为例，尝试过稍微弄乱它，这就是我想到的

$(document).ready(function() {

    // OPEN AND CLOSE A //

    $('.A').toggle(function() {
        $('.A').animate({
            top: '-=200'
        }, 1000).addClass('active');
    },function() {
        $('.A').animate({
            top: '+=200'
        }, 1000).removeClass('active');
    })
    $('.close_A').click(function() {
        $(".A").click();
    });

    // OPEN AND CLOSE B //

    $('.B').toggle(function() {
        $('.B').animate({
            top: '-=200'
        }, 1000).addClass('active');
    },function() {
        $('.B').animate({
            top: '+=200'
        }, 1000).removeClass('active');
    })
    $('.close_B').click(function() {
        $(".B").click();
    });

    // OPEN AND CLOSE C //

    $('.C').toggle(function() {
        $('.C').animate({
            top: '-=200'
        }, 1000).addClass('active');
    },function() {
        $('.C').animate({
            top: '+=200'
        }, 1000).removeClass('active');
    })
    $('.close_C').click(function() {
        $(".C").click();
    });
});

$(document).ready(function() {

// OPEN AND CLOSE WHO //    

$('.who').click(function() {

// IF WHAT IS OPEN, CLOSE FIRST, THEN OPEN WHO

if($('.what').hasClass('active')) {
$('.what').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.who').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHY IS OPEN, CLOSE IT FIRST, THEN OPEN WHO

else if($('.why').hasClass('active')) {
$('.why').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.who').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHO IS OPEN, CLICK TO CLOSE IT

else if($('.who').hasClass('active')) {
$('.who').animate({
  top: '+=200'
}, 1000).removeClass('active');
}

// IF NOTHING IS OPEN, CLICK TO OPEN WHO

else
$('.who').animate({
  top: '-=200'
}, 1000).addClass('active');


});

// OPEN AND CLOSE WHAT //   

$('.what').click(function() {

// IF WHO IS OPEN, CLOSE FIRST, THEN OPEN WHAT

if($('.who').hasClass('active')) {
$('.who').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.what').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHY IS OPEN, CLOSE IT FIRST, THEN OPEN WHAT

else if($('.why').hasClass('active')) {
$('.why').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.what').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHAT IS OPEN, CLICK TO CLOSE IT

else if($('.what').hasClass('active')) {
$('.what').animate({
  top: '+=200'
}, 1000).removeClass('active');
}

// IF NOTHING IS OPEN, CLICK TO OPEN WHAT

else
$('.what').animate({
  top: '-=200'
}, 1000).addClass('active');


});

// OPEN AND CLOSE WHY //    

$('.why').click(function() {

// IF WHO IS OPEN, CLOSE FIRST, THEN OPEN WHY

if($('.who').hasClass('active')) {
$('.who').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.why').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHAT IS OPEN, CLOSE IT FIRST, THEN OPEN WHY

else if($('.what').hasClass('active')) {
$('.what').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.why').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHY IS OPEN, CLICK TO CLOSE IT

else if($('.why').hasClass('active')) {
$('.why').animate({
  top: '+=200'
}, 1000).removeClass('active');
}

// IF NOTHING IS OPEN, CLICK TO OPEN WHY

else
$('.why').animate({
  top: '-=200'
}, 1000).addClass('active');
});
});