jQuery一次动画一个div

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