Question

我有一个HTML段落，最初我想要隐藏。后来在点击事件上我希望通过隐藏那个来显示或显示其他段落存在的位置。但是当我尝试将可见性属性设置为隐藏时，那段时间也是段，是我不想要的空间和高度，宽度..

以下是示例段落..

<div id="TeamsDesc" style="visibility: hidden;">
            <p id="Billing" style="float:left;color: #666666; width:700px; font-family: Candara,Trebuchet MS,sans-serif; font-size: 12px; font-weight: bold; border-right: thin dotted #666666; line-height: 18px;">

             Paragraph Contents

            </p>
</div>

如果我在网页末尾添加此内容，则会增加不需要的网页高度。

Answer 1

应用display:none代替visibility:hidden

使用visibility:hidden时，该元素将不可见，但它会被渲染，并且会占用相应的空间，display:none元素将位于DOM，但是根本不会呈现，也不会占用空间。

根据评论更新

$('button').click(function(){
 $('#para1').hide();
 $('#Billing').show();
})

Answer 2

如果您不希望元素在未显示时占用空间，则可以使用display:none代替visibility: hidden。要显示您需要的元素display:block

<div id="TeamsDesc" style="display: none;">
    <p id="Billing" style="float:left;color: #666666; width:700px; font-family: Candara,Trebuchet MS,sans-serif; font-size: 12px; font-weight: bold; border-right: thin dotted #666666; line-height: 18px;">Paragraph Contents</p>
</div>

display

的一些可能值

display: none    
display: inline
display: block   
display: inline-block  
display: inherit

您可以阅读有关展示here

的更多信息

如何隐藏HTML元素而不占用空间

2 个答案: