jQueryでは要素を非表示にすることはできますが、非表示にするとDOMを変更することはできませんか?私は特定の要素を隠していますが、隠れているとその下の要素が上に移動します。私はそれが起こることを望んでいません。私は空間を同じにしておきたいが、要素は自由に表示/非表示にしたい。jQueryページレイアウトでスペースを維持しながら要素を非表示にする
これを行うことはできますか?
$("#id").css("visibility", "hidden");
jQueryでは要素を非表示にすることはできますが、非表示にするとDOMを変更することはできませんか?私は特定の要素を隠していますが、隠れているとその下の要素が上に移動します。私はそれが起こることを望んでいません。私は空間を同じにしておきたいが、要素は自由に表示/非表示にしたい。jQueryページレイアウトでスペースを維持しながら要素を非表示にする
これを行うことはできますか?
$("#id").css("visibility", "hidden");
代わりのhide()
、使用:
css('visibility','hidden')
hide()
が完全にドキュメントフローや原因から要素を削除none
にdisplay
スタイルを設定します
どうすれば再表示できますか? – slandau
'css( 'visibility'、 'visible')' –
visibility
hidden
へを設定してみてくださいスペースを取らないようにする。
visibility:hidden
は、そのままの状態に保ちます。
display: none;
はコンテンツフローから取り除くので、他のコンテンツは空のスペースに移動します。 (display: block;
はそれを流れに戻してすべてを押し出す)。
visibility: hidden;
コンテンツフローを占有しながらも、それを見えなくするだけです。 (visibility: visible;
で再度表示されます)
コンテンツフローを変更しない場合は、visibility
を使用します。
fadeTo
もそうではなく、たとえば
fadeOut
を使用するよりも、ここでの解決策を提供するかもしれない完了時に
display:none
を設定していないことが注目されている別の答えで
:私は私の前opacity:0
を使用
これを見たvisibility:hidden
トリック。
私は何の利点も認識していませんが、実際にはレンダリングが遅くなる可能性があります。しかし、それはとにかく選択肢です。
大きな違いの1つは、あなたがインタラクティブないvisibility:hidden
を持っていますが、ユーザーがopacity:0
を持つ要素とをやり取りできる要素で(例えば、焦点を合わせるかクリックする)ことができるということです。これは、おそらく隠された要素には不利な点です。 (DeadPassiveで指摘されています)
隠れ要素と対話することはできませんが、不透明度が0の要素を使うことはできます。 – DeadPassive
または優遇;) – feskr
@feskr有利な状況が考えられる場合は、共有してください! – joeytwiddle
どのようにゼロ幅を与えるのですか? – mrtsherman
@mrtsherman:幅がゼロであることはお勧めしません:目の不自由な人や低視力のユーザーが使用する多くのスクリーンリーダーは、このように「隠された」コンテンツを読み込みますが、おそらくコンテンツisnと混同する可能性がありますこの時点で利用できるはずです。 cssの可視性を使用する:hiddenはここに行く方法です。 – BrendanMcK