Angular 6 将我的元素设置为显示：无

Question

更新：即使我从 HTML 模板中删除了对 TS 函数的所有引用，这仍然会发生。即使我删除了 SCSS 类 side-nav-submenu 和 submenu-open 的内容，也会发生这种情况。但是，如果我从 ul 中删除 side-nav-submenu 类，它就会消失。

我正在尝试创建一个移动端导航菜单，它是一个包含按钮作为列表项的无序列表，每个按钮后面都有另一个无序列表，它是一个子菜单。子菜单有height: auto; 和max-height: 0;，并在最大高度上设置了过渡，然后我使用它在切换菜单时使其扩展和收缩。

我遇到了一个非常奇怪且非常具体的错误。如果我打开一个子菜单，然后单击其中的一个按钮（它们目前什么都不做），然后单击其他任何东西，子菜单就会在其上设置style="display: none;"。我可以在开发工具中实时看到这种情况。

我很困惑，因为我的代码中没有在这些子菜单上设置display: none;。我只能猜测它是 Angular 做的，但我无法想象为什么。这是我的代码。

side-nav-mobile.component.html

<ul [class.nav-active]="navOpen" class="side-nav-menu-mobile">
  <div (click)="toggleSubNav($event)">
    <li id="inv" class="side-nav-button">Inventory <span class="menu-arrow" [class.arrow-down]="subNavOpen['inv']">&#8250;</span></li>

    <ul class="side-nav-submenu">
      <li>Add An Item</li>
      <li>Inventory Search</li>
    </ul>

    <li id="cust" class="side-nav-button">Customers <span class="menu-arrow" [class.arrow-down]="subNavOpen['cust']">&#8250;</span></li>

    <ul class="side-nav-submenu">
      <li>Add New Customer</li>
      <li>Awaiting Action</li>
    </ul>

    <li id="trans" class="side-nav-button">Transactions <span class="menu-arrow" [class.arrow-down]="subNavOpen['trans']">&#8250;</span></li>

    <ul class="side-nav-submenu">
      <li>Bill Of Sale</li>
    </ul>

  </div>
</ul>

side-nav-mobile.component.scss

@import "../../global-vars.scss";

.side-nav-menu-mobile {
  display: inline-block;
  background-color: $page-background-color;
  left: -100%;
  overflow: hidden;
  height: 100vh;
  width: 50%;
  position: absolute;
  transition: 0.25s ease-in-out;
  z-index: 10;
  margin: 0;
  padding: 0;
}
.side-nav-menu-mobile > div {
  margin-top: 3em;
}
.side-nav-menu-mobile > ul {
  padding: 0;
  margin: 0;
}
.side-nav-menu-mobile li {
  list-style: none;
  padding: 1em;
}
.side-nav-menu-mobile div > li {
  width: calc(100% - 1em);
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
}
.side-nav-submenu {
  height: auto;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.15s linear;
  padding-left: 1em;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.submenu-open {
  // This is a horrible way to do this.
  // If something better ever comes along, implement.
  max-height: 8em;
}
.nav-active {
  left: 0;
}
.menu-arrow {
  display: inline-block;
  transform: rotate(0);
  transition: 0.15s ease-in;
}
.arrow-down {
  transform: rotate(90deg);
}
@media screen and (min-width: 1200px) {
  .side-nav-menu-mobile {
    display: none;
  }
}

side-nav-mobile.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-side-nav-mobile',
  templateUrl: './side-nav-mobile.component.html',
  styleUrls: ['./side-nav-mobile.component.scss']
})
export class SideNavMobileComponent implements OnInit {
  navOpen: boolean = false;
  subNavOpen: Object = {
    inv: false,
    cust: false,
    trans: false
  };

  toggleSlide(): void {
    this.navOpen = !this.navOpen;
  }

  toggleSubNav(event): void {
    if(event.target.className.indexOf("side-nav-button") == -1) {
      return;
    }
    if(event.target.nextElementSibling.className.indexOf("submenu-open") == -1) {
      event.target.nextElementSibling.classList.add("submenu-open");
      this.subNavOpen[event.target.id] = true;
    } else {
      event.target.nextElementSibling.classList.remove("submenu-open");
      this.subNavOpen[event.target.id] = false;
    }
  }

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

原来side-nav-submenu 类名也用于桌面侧菜单，这在某种程度上是冲突的，因为桌面子菜单被设置为display: none，因为我们在移动设备上。将类名改为side-nav-mobile-submenu即可解决。