Hide div but keep the empty space

问题

I have the following div

CSS

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

HTML

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

Then I have a click function on an element to hide the above div:

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

When I hide the div it will collapse (stop taking any space). This is messing with the layout of my page.

Is there a way I can hide the div but still take the space that it was taking before? I dont want to change the font color because it would be still selectable.

Thanks

回答1:

Use visibility css property for this

visibility:

The visibility property specifies whether the boxes generated by an element are rendered.

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

Demo: Fiddle

回答2:

And another option for the sake of completeness. Toggle opacity:

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

http://jsfiddle.net/KPqwt/

However using visibility is prefered for this task.

回答3:

Try:

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

hide() is the equivalent to: $(".description").css("display", "none");

Which does not reserve the space the element was taking.

Hidden makes the element invisible, but stills reserves the space.

回答4:

It's important to note that dfsq's example using Opacity:0 will still allow the contents to be selected, copy/pasted, etc., although there is no visible text-highlighting when selecting.

回答5:

you can wrap another div around the outside of it, and probably tell it a specific height to occupy. that way your inner div can show and hide and fadeOut, etc, and the outer div will hold down the real-estate on the page.

来源：https://stackoverflow.com/questions/16316431/hide-div-but-keep-the-empty-space