jQuery 菜单滑动 up/down div，但也在 right/left 内滑动 divs

Question

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

添加 class "active" = 因此可以在激活时设置标签样式。
垂直滑动 up/down div（#information（"About" 和 "Contact" 的包装））。
第 div 页之间的水平幻灯片 left/right（在 "About" 和 "Contact" 之间）
如果 "About" 或 "Contact" 应该是活动的 "page" 并显示，那么如果再次单击 "About" link 它应该关闭幻灯片向上#information wrapper。

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

如果有人能帮助我，我将不胜感激。此外，我不确定，但是否可以将所有内容作为一个组合脚本而不是 divided into parts?

亲切的问候，Morten。

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

jQuery 菜单滑动 up/down div，但也在 right/left 内滑动 divs

jQuery menu slide up/down div, but also slide divs inside right/left

html

css

jquery

animation

menu