2011-06-18 5 views
147

jQueryでは要素を非表示にすることはできますが、非表示にするとDOMを変更することはできませんか?私は特定の要素を隠していますが、隠れているとその下の要素が上に移動します。私はそれが起こることを望んでいません。私は空間を同じにしておきたいが、要素は自由に表示/非表示にしたい。jQueryページレイアウトでスペースを維持しながら要素を非表示にする

これを行うことはできますか?

$("#id").css("visibility", "hidden"); 
+0

どのようにゼロ幅を与えるのですか? – mrtsherman

+8

@mrtsherman:幅がゼロであることはお勧めしません:目の不自由な人や低視力のユーザーが使用する多くのスクリーンリーダーは、このように「隠された」コンテンツを読み込みますが、おそらくコンテンツisnと混同する可能性がありますこの時点で利用できるはずです。 cssの可視性を使用する:hiddenはここに行く方法です。 – BrendanMcK

答えて

252

代わりのhide()、使用:

css('visibility','hidden') 

hide()が完全にドキュメントフローや原因から要素を削除nonedisplayスタイルを設定します

+3

どうすれば再表示できますか? – slandau

+70

'css( 'visibility'、 'visible')' –

37

visibilityhiddenへを設定してみてくださいスペースを取らないようにする。

visibility:hiddenは、そのままの状態に保ちます。

18

display: none;はコンテンツフローから取り除くので、他のコンテンツは空のスペースに移動します。 (display: block;はそれを流れに戻してすべてを押し出す)。

visibility: hidden;コンテンツフローを占有しながらも、それを見えなくするだけです。 (visibility: visible;で再度表示されます)

コンテンツフローを変更しない場合は、visibilityを使用します。

jQueryの fadeToもそうではなく、たとえば fadeOutを使用するよりも、ここでの解決策を提供するかもしれない完了時に display:noneを設定していないことが注目されている別の答えで
6

これを見たvisibility:hiddenトリック。

私は何の利点も認識していませんが、実際にはレンダリングが遅くなる可能性があります。しかし、それはとにかく選択肢です。

大きな違いの1つは、あなたがインタラクティブないvisibility:hiddenを持っていますが、ユーザーopacity:0を持つ要素とをやり取りできる要素で(例えば、焦点を合わせるかクリックする)ことができるということです。これは、おそらく隠された要素には不利な点です。 (DeadPassiveで指摘されています)

+1

隠れ要素と対話することはできませんが、不透明度が0の要素を使うことはできます。 – DeadPassive

+0

または優遇;) – feskr

+0

@feskr有利な状況が考えられる場合は、共有してください! – joeytwiddle

関連する問題