Question

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

我正在尝试创建一个移动侧导航菜单，该菜单是一个无序列表，其中包含作为列表项的按钮，每个按钮后跟另一个子菜单（即无序列表）。子菜单有height: auto;和max-height: 0;，其过渡设置为max-height，然后在切换菜单时使用它来使其展开和收缩。

我有一个非常奇怪和非常具体的错误。如果我打开一个子菜单，然后单击其按钮之一（它们当前不执行任何操作），然后单击其他任何按钮，则子菜单将设置为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来解决。

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

1 个答案: