jquery - jQuery单击事件使div向下滑动并将下一个div推出视口

Question

我试图弄清楚如何让jQuery滑动#content2并用它替换#content1，同时让它看起来#content1实际上被#content2从视图中删除...

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

我对 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

只需绑定click一次，即可切换幻灯片效果。你可以试试这样的

$(document).ready(function() {

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

Answer 2

现在您尝试将两个单击事件处理程序绑定到同一个元素。这不可能是您尝试的方式，但对于命名空间事件，它是： $(#click).bind('click.event1')然后稍后.bind('click.event2')

但是，您可以在一个功能中实现所有功能：

$(document).ready(function() {
    // Pre selected for increased speed
    var content1 = $('#content1');
    var content2 = $('#content2');

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

它不会完美同步，但可能看起来不错。