ページレイアウトのスペースを維持しながらjQueryの非表示要素

169

jQueryで要素を非表示にできる方法はありますが、非表示の場合はDOMを変更できませんか？特定の要素を非表示にしていますが、非表示にすると、その下の要素が上に移動します。それが起こらないようにしたい。スペースはそのままにしておきたいが、要素は自由に表示/非表示にしたい。

できますか？

jquery html

— Slandau
ソース

幅をゼロにするのはどうですか？

— mrtsherman '18 / 06/18

8

@mrtsherman：幅をゼロにすることはお勧めしません：多くのスクリーンリーダー（盲人または視力の弱いユーザーが使用）は、この方法で「非表示」になっているコンテンツを読み上げます。この時点で利用可能になるはずです。css visibility：hiddenを使用して、ここに移動します。

— BrendanMcK 2011年

要素をフェードインおよびフェードアウトする前に動的に高さを保存できます=>階下を見ます（製品ループで使用しています）。$（ '。or-woo-bt'）。parent（）。parent（）。parent（）.hover（function（）{//スペースを確保; var rightHeight = $（this）.height（）; $（this）.css（ 'height'、rightHeight）; //非表示; $（this）.parent（）.parent（）。find（ 'a span.family-price'）。fadeOut（）;}、function（）{//表示; $（this）.parent（）。parent（）。find（ 'a span .family-price '）。fadeIn（' slow '）;}）;

— オリビエ

296

の代わりにhide()、次を使用します。

css('visibility','hidden')

hide()displayスタイルをnoneに設定します。これにより、要素がドキュメントフローから完全に削除され、スペースを占有しなくなります。

visibility:hidden スペースをそのまま保ちます。

— モル博士
ソース

82

css('visibility','visible')

— Dr.Molle

1

またはcss('visibility', '')

— Anthony McGrath

40

に設定しvisibilityてみてくださいhidden：

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

— チャドレヴィ
ソース

19

display: none;コンテンツフローからそれを取り除くので、他のコンテンツが残された空のスペースに移動するのがわかります。（display: block;すべてを邪魔にならないようにフローに戻します。）

visibility: hidden;スペースを取ってコンテンツフロー内に保持しますが、単に非表示にします。（visibility: visible;再びそれを明らかにします。）

visibilityコンテンツフローを変更しない場合は、使用する必要があります。

— きらきら
ソース

15

別の回答では、jQuery fadeToはdisplay:none完了時に設定されないfadeOutため、たとえば以下を使用するのではなく、ここで解決策を提供することもあります。

jQuery、ページの他の部分に影響を与えずにdivを非表示にします

— Lunelson
ソース

7

トリックopacity: 0を見る前に以前使用しましたvisibility: hidden。

ただし、多くの場合、要素を表示することはできませんが、要素を操作できるopacity: 0ため、問題が発生します。（DeadPassiveが指摘したように。）

通常それはあなたが望むものではありません。しかし、たぶん時々あなたはそうするかもしれませんか？

— Joeytwiddle
ソース

1

非表示の要素を操作することはできませんが、不透明度が0の要素を操作することはできます。

— DeadPassive

@feskr有利になる状況が考えられたら、シェアしてください！

— joeytwiddle 2016

@joeytwiddle答えに出くわした。空間を維持しながら、特定の状態の要素との相互作用を防ぐ必要がありました。可視性：隠されているとスペースを節約できるという事実は知っていましたが、相互作用を妨げるということは知りませんでした。

— feskr 2016