子菜单保持专注于页面更改角度 2答案

【问题标题】：Submenu stay focus on page change angular 2子菜单保持专注于页面更改角度 2
【发布时间】：2018-01-16 12:56:54
【问题描述】：

更新 #1

经过长时间的研究，我已经实现了我想要的（在答案中发布解决方案＃1），现在我想用相同的逻辑实现 *ngFor 但现在当我点击主菜单时，两个菜单都会打开（每个子菜单都按需要工作），它需要的是当单击 Menu1 时，“SubMenu 1”显示和“SubMenu 2”保持隐藏，反之亦然，当单击 Menu2 时，“SubMenu 2”显示和“SubMenu 1”隐藏。

<nav class="navigation">
    <ul class="mainmenu">
        <li class="dropdown-content" (click)="onClickHome()"><a href='javascript:void(0)'>Home</a>
        </li>
        <li [class]="hideUsability" (click)="onSelectMetrics()" *ngFor="let menu of entities"><a href='javascript:void(0)'>{{menu.entity_id}}</a>
            <ul class="dropdown-content" [hidden]="IsHiddenMetrics">
                <li (click)="onClickSubmenu(value.value_id)" *ngFor="let value of menu.values"><a href='javascript:void(0)'>{{value.value_id}}</a></li>
            </ul>
        </li>
    </ul>
</nav>

onSelectExtractor(){
        if(this.IsHiddenExtractor == true){
            this.IsHiddenExtractor= !this.IsHiddenExtractor;
        }
        this.IsHiddenMetrics=true;
    }

    onSelectMetrics(){
        if(this.IsHiddenMetrics == true){
            this.IsHiddenMetrics= !this.IsHiddenMetrics;
        }
        this.IsHiddenExtractor=true;
    }

    onClickSubmenu(value_id: number){
        if(value_id == 2){
            this.router.navigate(['/pages1.html'], { skipLocationChange: true});
        } else{
            this.router.navigate(['/pages2.html'], { skipLocationChange: true});
        }
    }

    onClickHome(){
        this.IsHiddenMetrics= true;
        this.IsHiddenExtractor= true;
        this.router.navigate(['/welcome.html'], { skipLocationChange: true});
    }

原创

可以在主菜单悬停时使子菜单保持打开状态，悬停后将其关闭，除非悬停子菜单（最好不单击）并在单击子菜单并在页面更改或重定向到另一个页面后让子菜单聚焦？

我有以下代码，我正在使用 Angular 2；

<nav class="navigation">
    <ul class="mainmenu">
        <li>
            <a>Main Menu 1</a>
            <ul class="submenu">
                <li><a href='toPage2'>SubMenu 1</a></li>
            </ul>
        </li>
        <li><a>Main Menu 2</a>
            <ul class="submenu">
                <li><a href='toPage3'>SubMenu 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

.navigation {
  width: 220px;
}
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.mainmenu a {
  display: block;
  background-color: #3E4A5B;
  text-decoration: none;
  padding: 8px;
  color: #FFFFFF;
}
.mainmenu a:hover {
    background-color: #647484;
}
.mainmenu a:active {
   background-color: #EDEEF0;
  color: #151921;
    border-left:solid 4px #3E4A5B;
}
.mainmenu li:hover .submenu {
  display: block;
  max-height: 220px;
}
.submenu a {
  background-color: #647484;
    text-indent: 20px;
}
.submenu a:hover {
  background-color: #EDEEF0 !important;
  color: #151921;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

【问题讨论】：

您为每个 html 元素导出了事件，例如 click。您可以在 html 中添加 (click)="..."，这会将操作绑定到点击事件。
我认为您要查找的事件名称是mouseEnter 和mouseLeave
在你的情况下，你会做类似(mouseEnter)="openMenu()" (mouseLeave)="closeMenu()"或类似的事情。完成基本事件绑定后，您将弄清楚具体细节

标签： html css angular menu submenu

【解决方案1】：

解决方案 #1

HTML

<nav class="navigation">
    <ul class="mainmenu">
        <li class="dropdown-content" (click)="onClickHome()"><a href='javascript:void(0)'>Home</a>
        </li>
        <li [class]="hideUsability" (click)="onSelectMetrics()"><a>{{menuUsabilitymenu}}</a>
            <ul class="dropdown-content" [hidden]="IsHiddenMetrics">
                <li (click)="onClickSubmenuUsability()"><a href='javascript:void(0)'>{{menuUsabilitysubmenu}}</a></li>
            </ul>
        </li>
        <li [class]="hideExtractor" (click)="onSelectExtractor()"><a>{{menuExtractormenu}}</a>
            <ul class="dropdown-content" [hidden]="IsHiddenExtractor">
                <li (click)="onClickSubmenuExtractor()"><a href='javascript:void(0)'>{{menuExtractorsubmenu}}</a></li>
            </ul>
        </li>
    </ul>
</nav>

角度 2

onSelectExtractor(){
        if(this.IsHiddenExtractor == true){
            this.IsHiddenExtractor= !this.IsHiddenExtractor;
        }
        this.IsHiddenMetrics=true;
    }

    onSelectMetrics(){
        if(this.IsHiddenMetrics == true){
            this.IsHiddenMetrics= !this.IsHiddenMetrics;
        }
        this.IsHiddenExtractor=true;
    }

    onClickSubmenuUsability(){
        this.router.navigate(['/pages/metrics.html'], { skipLocationChange: true});
    }

    onClickSubmenuExtractor(){
        this.router.navigate(['/pages/extractor.html'], { skipLocationChange: true});
    }

    onClickHome(){
        this.IsHiddenMetrics= true;
        this.IsHiddenExtractor= true;
        this.router.navigate(['/pages/welcome.html'], { skipLocationChange: true});
    }

CSS

.navigation {
  width: 220px;
}
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.mainmenu a {
  display: block;
  background-color: #3E4A5B;
  text-decoration: none;
  padding: 8px;
  color: #FFFFFF;
}
.mainmenu a:hover {
    background-color: #647484;
}
.mainmenu a:active {
   background-color: #EDEEF0;
  color: #151921;
    border-left:solid 4px #3E4A5B;
}
.mainmenu li:hover .dropdown-content {
  display: block;
  max-height: 220px;
}
.submenu a {
  background-color: #647484;
    text-indent: 20px;
}
.submenu a:hover {
  background-color: #EDEEF0 !important;
  color: #151921;
}
.dropdown-content a:focus{
    background-color: #C8E0F6 !important;
    color: #151921;
}
.submenu a:focus {
  background-color: red !important;
  color: #151921;
}
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

【讨论】：