菜单的子菜单打不开

Question

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
 <nav class="navbar navbar-expand-sm navbar-light bg-light">

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

   <ul class="nav navbar-nav ml-auto">
    <li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
     <a class="btn nav-link dropdown-toggle" dropdownToggle>

     </a>
     <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
      <a class="btn dropdown-item" *ngFor="let language of languages" (click)="setLanguage(language)">

       <span style="vertical-align: super;"></span>
      </a>
     </div>
    </li>

    <!-- utente con avatar -->
    <li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
     <a class="btn nav-link float-right mt-1 pr-4" dropdownToggle>
      <span class="float-left mt-1">
          <i class="fa fa-user" style="font-size: 1.5rem;"></i>
          <!-- prevedere user image -->
        </span>
      <span class="float-right mt-1 ml-1">
          <div><b>user</b></div>
          <div *ngIf="currentUser.roles && currentUser.roles.length == 1">desc</div>
          <div *ngIf="currentUser.roles && currentUser.roles.length > 1">role</div>
        </span>
     </a>
     <!-- menu -->
     <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
      <!-- logo confidi -->
    <div class="dropdown-item text-center user-image">
     <img [src]="userService.getUserPicture(currentUser?.image?.content)" class="img-fluid" alt="">
        </div>
     <!-- ultimo accesso -->
    <div class="dropdown-item">
     <div class="font-weight-bold">access </div>
     <div>date</div>
    </div>
    <!-- matricola -->
    <div class="dropdown-item">
     <div class="font-weight-bold">numer </div>
     <div>user</div>
    </div>
    <!-- ruoli -->
    <div class="nav-item dropdown mr-2 cursor-pointer" dropdown>
     <a class="btn nav-link dropdown-toggle font-weight-bold" dropdownToggle>roles</a>
     <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
      <a class="btn dropdown-item" *ngFor="let role of currentUser.roles; let i = index">
       code - desc
      </a>
     </div>
    </div>


    <a class="dropdown-item logout-link" (click)="logout()">
     <i class="fa fa-lock"></i> <span class="font-weight-bold">logout</span></a>
  </div>
  </li>


  </ul>
  </div>
 </nav>
</header>

我有一个下拉菜单，其中包含多个下拉项目和一个我想成为子菜单的项目（包含项目列表）。我在我的菜单上添加了子菜单，但是当我尝试打开它时它打不开。

这里是 stackblitz

https://angular6-bootstrap4-navbar-j8ar1z.stackblitz.io

如您所见，有一个名为 roles 的子菜单未打开。我该如何解决？

Answer 1

问题出在您的 HTML - 您不能将 <li> 标签嵌套在另一个 <li> 标签中。

The HTML <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).

来源：MDN web docs

你可以把 <ul> 放在 <li> 里面。这实际上是创建嵌套列表的正确方法。

另一件事是您正在尝试使用嵌套下拉菜单，但这些似乎仍然是 an experimental feature of ngx-bootstrap

基本工作示例：

 <!-- template.html !-->
<ul >
  <li dropdown  [autoClose]="false" container="body">
       <a dropdownToggle class="dropdown-item dropdown-toggle"
         (click)="false">Languages <span class="caret"></span></a>

  <ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-nested">
    <li role="menuitem" *ngFor="let lang of languages"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{lang}}</a></li>


  </ul>
  </li>

  <li dropdown  [autoClose]="false" container="body">
       <a dropdownToggle class="dropdown-item dropdown-toggle"
         (click)="false">User <span class="caret"></span></a>

  <ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-nested">
    <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Settings</a></li>

    <li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
      <a dropdownToggle class="dropdown-item dropdown-toggle"
         (click)="false">Roles<span class="caret"></span></a>
      <ul *dropdownMenu class="dropdown-menu" role="menu">
        <li role="menuitem" *ngFor="let role of currentUser.roles"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{role}}</a></li>
      </ul>
    </li>

      <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Logout</a></li>
  </ul>
  </li>
</ul>

// Component.ts
import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      public menu: {}[] = [];
      languages =  ['pl', 'en', 'de', 'es'];
      currentUser = {roles: ['admin', 'inboxUser', 'developer']}
    }

Example on Stackblitz

菜单的子菜单打不开

Submenu of a menu doesn't open

javascript

html

css

angular

ngx-bootstrap