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

ORIGINAL

可以在主菜单上悬停子菜单并在悬停关闭它之后，除非将鼠标悬停在子菜单上（最好不要点击），然后点击它并在页面更改或重定向到另一个页面后让子菜单聚焦？ / p>

我有以下代码，我正在使用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;
}

子菜单专注于页面更改角度2

1 个答案: