COREUI 侧边栏最小化器和下拉菜单不起作用答案

【问题标题】：COREUI sidebar minimizer and dropdown is not workingCOREUI 侧边栏最小化器和下拉菜单不起作用
【发布时间】：2021-02-25 15:07:10
【问题描述】：

我必须自定义 COREUI 4.x 主题提供的侧边栏。下面是我的侧边栏的代码

<div class="app-body">
  <div class="sidebar">
    <nav class="sidebar-nav">
      <ul class="nav">
        <li class="nav-item">
          <a
            class="nav-link"
            routerLink="/dashboard"
            [routerLinkActive]="['active']"
            [routerLinkActiveOptions]="{ exact: true }"
          >
            <i class="icon-speedometer"></i> Dashboard
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="#"
            routerLink="/alerts-configuration"
            [routerLinkActive]="['active']"
            [routerLinkActiveOptions]="{ exact: true }"
          >
            <i class="icon-layers"></i> Alert Configuration
          </a>
        </li>
        <li
          class="nav-item nav-dropdown"
          dropdown
          [routerLinkActive]="['active']"
          [routerLinkActiveOptions]="{ exact: true }"
        >
          <a class="nav-link nav-dropdown-toggle">
            <i class="icon-puzzle"></i>Administration
          </a>
          <ul class="nav-dropdown-items">
            <li class="nav-item">
              <a
                class="nav-link"
                routerLink="/device-management/devices"
                [routerLinkActive]="['active']"
                [routerLinkActiveOptions]="{ exact: true }"
              >
                <i class=""></i>Devices Management
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                routerLink="/sites"
                [routerLinkActive]="['active']"
                [routerLinkActiveOptions]="{ exact: true }"
              >
                <i class="icon-settings"></i>Sites Management
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
    <button class="sidebar-minimizer brand-minimizer" type="button"></button>
  </div>
</div>

现在当我尝试点击Administration时，它不会打开下拉菜单，而且当我尝试从底部的箭头最小化时，这也不起作用。请帮忙！

【问题讨论】：

您能否提供一个完整的工作代码示例而不是小sn-p？

标签： html css angular bootstrap-5 core-ui

【解决方案1】：

我也遇到了这个问题。我发现如果在生成页面之前添加控制侧边栏动画的 JavaScript 文件，侧边栏将不起作用。解决方案：最后添加 CORE UI JavaScript 文件。有点像这样：

<html>
  <body>
  {the entire html page}
  <script src="https://coreui.io/demo/free/3.4.0/js/main.js" async defer></script>
  </body>

</html>

“异步延迟”可能需要也可能不需要。

【讨论】：

不起作用，因为您的代码适用于 CoreUI 3.x，而问题是关于 CoreUI 4.x

【解决方案2】：

请在下面找到我的有效代码。

 <li class="nav-item nav-dropdown " [appIsAuthorized]="roleconst.ProductAdminAbove" (click)="status=!status"
          [ngClass]="status ? 'open' : ''">
          <a class="nav-link nav-dropdown-toggle ">
            <i class="nav-icon icon-puzzle"></i> Management
          </a>

【讨论】：

不适合我。您的代码与 CoreUI 4.X 兼容吗？