0

我的页面上有 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();
    });
});

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

4

1 回答 1

0

认为我已经找到了答案......尽管必须有一种更短的方法来做到这一点（顺便说一下，我将 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');
});
});
于 2013-04-30T11:28:25.713 回答