html - 父DIV高度:0px but child element still shows

Question

在寻找实现导航栏下拉菜单(类似于 Accordion )的方法时，我遇到了 this youtube video它使用自定义组件并操纵 card-content 元素的 max-height 来达到预期的效果。

HTML:

<ion-card>
  <ion-card-title text-center color="primary" (click)="toggle()"></ion-card-title>
  <ion-card-content #cc>
    <p>Hello World!</p>
  </ion-card-content>
</ion-card>

CSS:

.card-content{
  max-height: 0px;
}

TS:

toggled = false;
@ViewChild("cc") cc: any;

toggle() {
  if (this.toggled) {
    this.renderer.setStyle(this.cc.nativeElement, "max-height", "0px");
  } else {
    this.renderer.setStyle(this.cc.nativeElement, "max-height", "500px");
  }
  this.toggled = !this.toggled;
}

从头到尾观看视频时一切正常。 但是我想要的是导航栏的下拉菜单，所以我决定将他的部分代码编辑为...

#cc{
    max-height: 0px;
}

<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>

<div #cc id="cc">
  <p>Hello World!</p>
</div>

但它没有按预期工作。当 div 为 (0px) 时，我仍然可以看到它包含的元素，在本例中是“Hello World!”

我是不是哪里做错了，还是它只对 ionic 卡有效？

Answer 1

只需将 overflow: hidden; 添加到父级即可:

#cc{
    max-height: 0px;
    overflow: hidden;
}

<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>

<div #cc id="cc">
  <p>Hello World!</p>
</div>