Question

我试图通过应用 height：0px 来隐藏DOM。我希望因为填充它不会完全隐藏DOM。 我还提供了边框属性。我使用高度而不是显示属性，以便在隐藏时实现平滑（过渡）。请参考以下代码

＆＃13;

var body = document.body;
var banner = document.getElementById('banner');
var close  = document.getElementById('close');
var reset = document.getElementById('reset');
close.onclick = closeBanner;
reset.onclick = resetHeight;

function closeBanner(){
	banner.style.height = 0;
}

function resetHeight(){
	banner.style.height = '40px';
}

＆＃13;

.banner{
  height: 40px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    background: #2fc5c5;
    color: #fff;
    padding: 7px 15px;
    transition: height .3s ease;
    border: 1px solid #10b5b4;

}
.close{
  float: right;
  cursor:pointer;
  font-size: 18px;
  background: #fff;
  padding: 3px;
  color: #3d3d3d;
}

＆＃13;

<div class="banner" id="banner">
  <span> Content Goes here</span>
  <span class="close" id='close'>x</span>
</div>
 <button id="reset"> Reset Height</button>

＆＃13;

请参阅小提琴HERE

Answer 1

这种方法会遇到两个不同的问题。

它仍然可见的原因是，因为它有默认值填充，也需要设置为0。
容器有边框，因此即使您将高度设置为0并将填充设置为0，您仍会看到某些内容。因此，您还必须在点击时删除边框：）

Answer 2

这是因为padding和border。您需要添加更多css以及height: 0;

padding-top: 0px;
padding-bottom: 0px;
border: none;

Answer 3

不是制作height:0，而是通过以下方法将其淡化：

$("#banner").fadeOut("slow");

使用fadeOut()的优势：

您无需使用其他css，例如height:0或transition等。
它为您提供平稳过渡。
只需一行即可编写此代码并缩小代码大小。

Answer 4

＆＃13;

var body = document.body;
var banner = document.getElementById('banner');
var close  = document.getElementById('close');
var reset = document.getElementById('reset');
close.onclick = closeBanner;
reset.onclick = resetHeight;

function closeBanner(){
	banner.style.height = 0;
  banner.style.padding = 0;
  banner.style.border = 0;
}

function resetHeight(){
	banner.style.height = '40px';
}

＆＃13;

.banner{
  height: 40px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    background: #2fc5c5;
    color: #fff;
    padding: 7px 15px;
    transition: height .3s ease;
    border: 1px solid #10b5b4;

}
.close{
  float: right;
  cursor:pointer;
  font-size: 18px;
  background: #fff;
  padding: 3px;
  color: #3d3d3d;
}

＆＃13;

<div class="banner" id="banner">
  <span> Content Goes here</span>
  <span class="close" id='close'>x</span>
</div>
 <button id="reset"> Reset Height</button>

＆＃13;

Answer 5

我想这可以帮助您解决问题。

＆＃13;

var body = document.body;
var banner = document.getElementById('banner');
var close  = document.getElementById('close');
var reset = document.getElementById('reset');
close.onclick = closeBanner;
reset.onclick = resetHeight;

function closeBanner(){
	banner.style.height = 0;
  banner.style.padding = 0;
  banner.style.border = 0;
}

function resetHeight(){
	banner.style.height = '40px';
}

＆＃13;

.banner{
  height: 40px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    background: #2fc5c5;
    color: #fff;
    padding: 7px 15px;
    transition: height .3s ease;
    border: 1px solid #10b5b4;

}
.close{
  float: right;
  cursor:pointer;
  font-size: 18px;
  background: #fff;
  padding: 3px;
  color: #3d3d3d;
}

＆＃13;

<div class="banner" id="banner">
  <span> Content Goes here</span>
  <span class="close" id='close'>x</span>
</div>
 <button id="reset"> Reset Height</button>

＆＃13;

高度0不会隐藏DOM

5 个答案: