jQuery .animate（）値の余分なスペース..値を2倍にしてページの上部から座ってほしい

Question

ページの上部にあるドロップダウンタブを作成したいときにクリックしたときそれはいくつかのリンクなどを表示するためにスライドします。

リンクのコンテナの高さが変わるので、jQueryにコンテナの高さを取得させ、CSSのトップ値を負の整数に設定しようとしています。タブをクリックすると、リンクコンテナの高さだけスライドします。

メニューがスライドするときとは別に、すべてはうまく動作します。それは、それが取るべき値を2倍にします。 （DIVの上部とページの間にスペースがあります。）

次のようにするdivのためのコードは次のように

<div class="quickLinks"> 
    <div class="quickLinksContent"> 
     dsf 
    </div> 
    <div class="quickLinksTitle">Logout</div> 
</div> 

CSSは次のとおりです。

.quickLinks { 
    position:relative; 
    top:0px; 
    width:150px; 
    background-color:#3300FF; 
} 

.quickLinksTitle { 
    height:30px; 
    background-color:#CC6600; 
    vertical-align:bottom; 
    text-align:center; 
} 

.quickLinksContent { 
    height:20px; 
} 

そして、 Javascriptは次のとおりです：

$('.quickLinks').css({ 
    top: $('.quickLinksContent').height()*-1 + 'px' 
}); 

$('.quickLinksTitle').click(function() { 
    if ($('.quickLinksContent').offset().top < 1) { //if links are hidden 
     $('.quickLinks').animate({ 
      top: $('.quickLinksContent').height()+'px'      
     }); 
    } 
    else { //if links are shown 
     $('.quickLinks').animate({ 
      top: $('.quickLinksContent').height()*-1+'px'       
     }); 
    } 
}); 

私はそれを取り除きます。そして、はい、高さを2で割ってみると、ギャップが半分になります。

ありがとうございました。ここ

Answer 1

$('.quickLinksTitle').click(function() { 

     $('.quickLinksContent').slideToggle(); 

}); 

CSS

.quickLinksContent { 
    height:20px; 
    display:none; 
} 

ビュー：http://jsfiddle.net/La2YH/