jQuery 单击事件使 div 向下滑动并将下一个 div 推出视口(viewport)

Question

我正在尝试弄清楚如何使 jQuery 向下滑动 #content2 并用它替换 #content1，同时使其看起来像 #content1 实际上被 #content2 按下，将其从 View 中删除...

然后，单击使 #content2 替换 #content1 的同一按钮也需要通过用 #content1 替换 #content2 来实现相反的效果，使它们向上滑动并相互推开......

我不太擅长 jQuery，所以我确信我的方法是错误的，但这是我尝试过的:

$(document).ready(function() {
$('#click').click(function() {
 if($('#content1').is(':visible')) {
  $('#content1').slideUp();
 }
 else {
  $('#content2').slideDown();
 }
}).click(function() {
 if($('#content1').is(':visible')) {
  $('#content2').slideDown();
 }
 else {
  $('#content1').slideUp();
 }
});

});

Answer 1

只需绑定(bind)一次点击，即可切换幻灯片效果。 你可以尝试这样的事情

$(document).ready(function() {

  $('#click').click(function() {
    $('#content1').slideToggle();
    $('#content2').slideToggle();
  }
}