web-dev-qa-db-ja.com

divを非表示にしますが、空のスペースを保持します

私は次のdivを持っています

CSS

.description {
    color: #b4afaf;
    font-size: 10px;
    font-weight: normal;
}

HTML

<div class="description">Some text here </div>

次に、上記のdivを非表示にする要素にクリック機能があります。

$('#target').click(function(){
  $(".description").hide();
});

Divを非表示にすると、それが折りたたまれます（スペースを取りません）。これは私のページのレイアウトをいじっています。

Divを非表示にする方法はありますが、それでも前に使用していたスペースを使用できますか？フォントの色は選択可能なままなので、変更したくありません。

ありがとう

jquerycsshtmlhide
59
Youssef

このために visibility cssプロパティを使用します

可視性：

Visibilityプロパティは、要素によって生成されたボックスがレンダリングされるかどうかを指定します。

$(".description").css('visibility', 'hidden');

デモ： フィドル

114
Arun P Johny

完全を期すための別のオプション。 opacityの切り替え：

$(".description").css('opacity', 0); // hide
$(".description").css('opacity', 1); // show

http://jsfiddle.net/KPqwt/

ただし、このタスクにはvisibilityを使用することをお勧めします。

8
dfsq

試してください：

_$(".description").css("visibility", "hidden")
_

hide()は次と同等です：$(".description").css("display", "none");

要素が占有していたスペースを予約しません。

Hiddenは要素を非表示にしますが、スペースは確保します。

5
Darren

Opacity：0を使用する dfsq の例では、選択時に表示されるテキストの強調表示はありませんが、コンテンツの選択、コピー/貼り付けなどを引き続き許可することに注意することが重要です。

1
fpscolin

外側に別のdivをラップして、占有する特定の高さを伝えることができます。そうすれば、内側のdivの表示と非表示、フェードアウトなどを行うことができ、外側のdivはページの不動産を保持します。

0
Heinz