ページの読み込み時にslideDown/slideUp複数の状態を切り替えます

Question

ページが読み込まれると、コンテンツを表示したいコンテンツや他のコンテンツを非表示にする要素があります。ユーザーがヘッダーをクリックすると、要素は現在の状態に応じて非表示と表示の切り替えを行います。私が書いたスクリプトは動作しますが、クォークがあり、クリックを判断するための.contentの状態を判断するif/elseを持つ必要があると感じています。現在は、ユーザが.contentを表示するために隠れ要素を2回クリックする必要があります。ここで

$('#services .content').hide(); 
$('.header').toggle(function() { 
    $(this) 
     .addClass('active') 
     .next('.content').slideUp(); 
    }, function() { 
     $(this) 
     .removeClass('active') 
     .next('.content').slideDown(); 
}); 

はjsfiddle

へのリンクがどれヘルプははるかに高く評価されています。ありがとうございました。あなたの周りtoggle機能であなたの機能を入れ替えた場合

Answer 1

は、それはあなたが欲しいあなたに影響を与えるべきである -

$(function(){ 
    $('#services .content').hide(); 
    $('.header').click(function() { 
     if ($(this).next().is(':visible')) $(this).addClass('active').next('.content').slideUp(); 
     else $(this).removeClass('active').next('.content').slideDown(); 
    }); 
}) 

更新フィドル - http://jsfiddle.net/daCkp/1/

Answer 2

http://jsfiddle.net/tg5eZ/

ない/他

場合

$(function() { 
    $('#services .content').hide(); 
    $('.header').click(function() { 
     $(this).toggleClass('active').next('.content').slideToggle(); 
    }) 
}); 

は、私はまた、これは、それがオペラに良く見えるのです

display:none 

に

#services .content 

divのスタイルを設定し、

$('#services .content').hide(); 

を削除します。私がjsfiddleを開いたら、このdivが表示されているのが見えてきて、それが隠されているのを見ました。