子菜单保持关注页面变化 angular 2

Question

更新#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;
}

Answer 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>

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

子菜单保持关注页面变化 angular 2

Submenu stay focus on page change angular 2

html

css

menu

submenu

angular