Question

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

例如，如果A处于活动状态且我点击B，A必须首先向下移动，然后B向上移动。

这是我移动div的代码（你会看到还有一个“close_A”元素，它只是一个关闭div的十字架）：

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

所以现在我的问题是，我怎么能这样做，以便当一个人打开时，我点击另一个，它首先关闭一个打开的。

Answer 1

想想我已经找到了答案......虽然必须采用更短的方式（顺便说一下，我将A，B和C改为Who，What和Why）：

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

当另一个动画向上移动时，jQuery动画一个Div向下移动

1 个答案: