Question

我正在Angular 7中构建响应式自定义topnav

<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;
   }
}

当我进行单击时，类会更改，控制台会记录该单击，但在主体中什么也没有发生。谢谢和问候！

Answer 1

那是因为您添加到<ul>元素中的类完全不起作用，请仔细观察：

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

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

2。。margin-bottom: 5px。它适用，但在这种情况下完全不起作用。

您可以使用更具表现力的样式（在此示例中为background-color: red）选中此 STACKBLITZ 。

Angular 7响应式下拉菜单

1 个答案: