Angular 7 响应式下拉菜单

Question

我在 Angular 7

中构建响应式自定义顶部导航

<nav id="nav" class="sticky" #stickyMenu [class.fixed] = "fixed">
        <ul>
          <li><a routerLink='home' routerLinkActive='activado'>Home</a></li>
          <li><a routerLink='projects' routerLinkActive='activado'>Projects and stuff</a></li>
          <li><a routerLink='contact' routerLinkActive='activado'>Contact</a></li>
        </ul>

        <ul [ngClass]="{'toggleMenuStyle': toggleMenu === true}">
             <i class="fa fa-bars icon" (click)="onToggleMenu()"></i>
          <li><a routerLink='home' routerLinkActive='activado'>Home</a></li>
          <li><a routerLink='projects' routerLinkActive='activado'>Projects and stuff</a></li>
          <li><a routerLink='contact' routerLinkActive='activado'>Contact</a></li>
        </ul>
      </nav>

在menu.component.ts...

toggleMenu = false;

onToggleMenu(){
    if(this.toggleMenu === true){
       this.toggleMenu = false;
    }else{
      this.toggleMenu = true;
    }
    console.log('click');
  }

和我的 css...

nav i {
  display: none;
  color:white;
}
.toggleMenuStyle{
  display: block;
  margin-bottom: 5px;
}

@media screen and (max-width:800px) {
   nav ul li{
     display: none
   }
   nav i{
     display: block;
   }
}

当我点击时 class 发生了变化并且控制台记录了点击但是在正文中什么也没有发生.. 谢谢和问候！

Answer 1

那是因为你添加到 <ul> 元素的 class 完全没有任何作用，仔细看看：

.toggleMenuStyle {
  display: block;
  margin-bottom: 5px;
}

1. display: block。元素 <ul> 已经具有相同的默认值，如 Default CSS Settings 块中所述。

2. margin-bottom: 5px。它适用，但在这种情况下完全没有任何作用。

您可以检查此 STACKBLITZ 以更具表现力的样式（本例中为 background-color: red）。

Angular 7 响应式下拉菜单

Angular 7 responsive dropdown menu

responsive-design

drop-down-menu

angular

angular7