Question

在寻找一种方法来实现导航栏下拉菜单（类似于手风琴）时，我遇到了this youtube video，该菜单使用了自定义组件并操纵了{strong> 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;
}

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

#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！”

我在这里做错什么了吗，或者它仅适用于离子卡？

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>

Answer 2

使用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>

父DIV高度：0像素，但子元素仍显示

2 个答案: