Question

我有一些标签样式div，目前位于页脚div后面。单击这些选项卡的顶部时，它们会向上滑动。但是，我想知道如何仅向一个向上滑动 - 所以当您单击选项卡然后单击选项卡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>

jQuery的：

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

    });

Answer 1

尝试

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

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

演示：Fiddle

jQuery一次动画一个div

1 个答案: