2011-12-06 13 views
4

私は、拡張可能なボタンを保持するためのコンテナとして使用するいくつかのネストされたDIV要素を持っています。

ユーザーがボタンをクリックすると、それが展開されてさらにいくつかのコンテンツが公開されます。

DIVが親DIVの内部にあり、表示プロパティが "none"に設定されるまで、すべてがうまく動作します。

jQueryの.slideUp()メソッドがディスプレイに表示されているかどうかに関係なく、拡張可能なボタンを最小限に抑える方法はありますか?

または、$ .slideDown()がディスプレイにセットアップされた要素で正しく動作するように設定するために必要なプロパティ/プロパティ:なしparent DIV?

答えて

3

代わりの拡張ボタンにslideUp()を適用する表示プロパティを設定することができことができ、彼らの「表示」を設定してみてください値を「なし」に設定します。

このように、.slideDown()メソッドを適用すると、要素が.slideUp()メソッドを使用して既に非表示になっていると考えられます。

+0

これを試してみましょう! – exoboy

+0

これはすごくうまくいっていて、要素自体とその親ではなくCSSを変更するだけでした。ありがとう! – exoboy

+0

+1 OPの問題を私が理解したものより良く理解しています。 –

5

親がdisplay:none;の場合は、子をスライドアップする前に表示する必要があります。 show機能でこれを行うことができます。コメントパー

$(divToSlide).parent().show(); 
$(divToSlide).slideUp(); 

、あなたは、代わりに、あなただけの「ブロック」に

$(divToSlide).parent().css("display", "block"); 
$(divToSlide).slideUp(); 
+0

実際、簡単な方法は、要素のCSS表示プロパティを "none"に変更することです。これにより、より多くの要素を処理するためのシステムオーバーヘッドが回避されます。 – henkojinko

+0

@henkojinko - 十分に公正ですが、詳細を教えてください。私はshowとset displayとvisibilityを仮定しました。それだけではありませんか? –

+0

あります。ただし、slideUpを最初に使用しなくても、特定の要素をslideDownで正しくトリガーするには、その表示プロパティを "none"にするだけです。そうすれば、ネストされている祖先が隠れているのか、ブロックされているのか、まったくないのか心配する必要はありません。 – henkojinko

0

私はまったく同じ問題を抱えていましたが、show()機能を適用するとslideUp/slideDownアニメーション自体が失われることがあるので、上記の解決策のどれも期待通りに機能しませんでした。

$(divToSlide).slideUp(delay, function() { 
    // When animation ends 
    $(this).css('display', 'none'); 
}); 

私はアニメーションを失うことなく、同じ結果を得ることができ、この方法は:私の最終的な解決策は、直接スタイルを適用するためにコールバック関数を使用していました。

関連する問題