jQuery一次设置一个div的动画

我有一些选项卡样式的div，当前位于页脚div后面。单击这些选项卡的顶部时，它们会向上滑动。但是，我想知道如何只向上滑动一个，因此当您单击选项卡a然后单击选项卡b时，选项卡a将向下滑动，因为选项卡b现在处于活动状态

目前，它们在单击时向上滑动，但我无法确定如何在任何时候都只能看到一个。或者，如果您也可以单击关闭，这将是非常有用的，尽管我忽略了这一点，因为我不确定如何使它与我正在尝试做的其他事情一起工作

HTML:

<div class="container">
  <div class="some__content">
    <h1>some content</h1>
  </div>
</div>

<div class="container">
            <div class="tab__menu">

                <div class="tab--hobbit tab--left">
                    <a href="#" class="tab--header">
                        <h3>Why choose us?</h3>
                    </a>
                    <div class="tab--content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec neque ligula. Nulla rutrum...</p>
                        <a href="" class="btn btn--med btn--soft">Learn More</a>
                    </div>
                </div>

                <div class="tab--hobbit tab--middle">
                    <a href="#" class="tab--header">
                        <h3>Why choose us?</h3>
                    </a>
                    <div class="tab--content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec neque ligula. Nulla rutrum...</p>
                        <a href="" class="btn btn--med btn--soft">Learn More</a>
                    </div>
                </div>

                <div class="tab--hobbit tab--right">
                    <a href="#" class="tab--header">
                        <h3>Why choose us?</h3>
                    </a>
                    <div class="tab--content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec neque ligula. Nulla rutrum...</p>
                        <a href="" class="btn btn--med btn--soft">Learn More</a>
                    </div>
                </div>

            </div> <!-- /*** end menu -->
        </div>

        <div class="quote__slider">
            <h2>fdgdfgdfgfdgdg</h2>
        </div>

var tabItem = $(".tab--hobbit");

    function closeTab(){
        tabItem.removeClass("active");
    }

    tabItem.click(function(event) {
        event.preventDefault();

        closeTab();
        $(this).addClass("active");

        if ($(this).hasClass('active')) {
            $(this).animate({
                top: -168
            });
        } else if (!tabItem.hasClass('active')) {
            closeTab();
            $(tabItem).animate({
                top: 0
            });
        }

    });

试一试

---

演示：

这无助于我将非活动选项卡的顶部位置设置回

0

$(this).toggleClass("active");

if ($(this).hasClass('active')) {
    $(this).animate({
        top: -80
    });
} else {
    $(this).animate({
        top: 0
    });
}