jQuery 菜单向上/向下滑动 div，但也可以在右/左滑动 div

Question

我希望有人可以帮助我，因为我偶然发现了一些 jquery 的问题。我想弄清楚的是：

1. 添加“活动”类 = 这样就可以在活动时设置标签样式。
2. 垂直向上/向下滑动 div（#information（“关于”和“联系人”的包装）。
3. 在页面 div 之间左右水平滑动（在“关于”和“联系方式”之间）。
4. 如果“About”或“Contact”应该是活动“页面”并显示出来，那么如果再次单击“About”链接，它应该关闭向上滑动#information 包装器。

This is what I got so far: JSFiddle

HTML：

<div id="information">
     <div id="info-about"></div>
     <div id="info-contact"></div>
</div>
<ul>
    <li><a id="about" class="page" href="#">About</a></li>
    <li><a id="contact" class="page" href="#">Contact</a></li>
</ul>

CSS：

#information {
    width: 200%;
    height: 300px;
    position: relative;
    left: 0;
    display: none;
}

#info-about {
    width: 50%;
    height: inherit;
    background: red;
    float: left;
}

#info-contact {
    width: 50%;
    height: inherit;
    background: blue;
    float: left;
}

jQuery：

$('li a').click(function(e) {
    e.preventDefault();
    $('a').removeClass('active');
    $(this).addClass('active');

    if ($(this).is('.page.active')) {
        $('#information').slideDown('slow');
    }
});

$('#about').click(function () {
    $('#information').animate({
        left: "0"
    }, 1000);
});

$('#contact').click(function () {
    $('#information').animate({
        left: "-100%"
    }, 1000);
});

如果有人能帮助我，将不胜感激。此外，我不确定，但是否可以将所有这些作为一个组合脚本而不是分成多个部分来完成？

亲切的问候，莫滕。

Answer 1

这就是你在https://jsfiddle.net/c01gat3/wa1e8oyv/之后的样子

$('li a').click(function(e) {
    e.preventDefault();

    if ($(this).hasClass('active')) {
        $('#information').slideUp('slow');
        $('a').removeClass('active');
    } else {
        $('#information').slideDown('slow');
        $('a').removeClass('active');
        $(this).addClass('active');

        if(this.id == 'about'){
            $('#information').animate({
            left: "0"
            }, 1000);

        } else {
            $('#information').animate({
            left: "-100%"
            }, 1000);
        }
    }
});