0

我有一个导航栏菜单，切换了一个类，它是否折叠，在这个导航栏中我有小的折叠菜单。当我正常使用导航栏时，它可以正常工作，但是当我单击折叠菜单并且导航栏折叠时，它应该切换类以打开导航栏，在第二种情况下，我不知道为什么我有那些黑色闪光/故障效果，你知道为什么以及如何纠正这个吗？

问题的gif

在这个 gif 上，当我第一次打开导航栏然后打开菜单时，你可以这样做，然后当我打开导航栏时，只点击折叠栏中的折叠菜单和那些有故障的黑点

.sidebar.fliph li a .nav-label, .sidebar.fliph li a .nav-label + span {
  display: none;
  transition: all 0.5s ease-in-out;
}

.sidebar.fliph {
  width: 42px;
  transition: all 0.5s ease-in-out;

}

.sidebar.fliph li {
  position: relative;
}

.sidebar.fliph .sub-menu {
  position: absolute;
  left: 39px;
  top: 0;
  background-color: #222;
  width: 150px;
  z-index: 100;
}

<script src="navbar.component.ts"></script>
<script src="navbar.component.spec.ts"></script>
<div class="sidebar left" [ngClass]="state ? '':'fliph'" id="navbarcontainer">
    <ul class="list-sidebar bg-defoult">
        <button class="btn btn-dark" id="bouttonmenunavbar" type="button" (click)="switchstate()"> <!--switchsate() switch the value of state and change the class of the nav bar container-->
            <li class="nav-header "><span> <img alt="logo" class="img-circle"
                                                src="../../assets/img/Logo-P3G-Officiel.svg"></span>
            </li>
            <li>
                <i class="fas fa-bars"></i>
            </li>
        </button>
        <ul>
            <ul *ngIf="isTeacher()">
                <li><a class="collapsed collapse active" data-target="#TPs" data-toggle="collapse"
                       (click)="unwindOnCollapsed()"><i
                        class="fas fa-file-word"></i><span class="nav-label">TP</span><span
                        class="fa fa-chevron-left float-right"></span></a>
                    <ul class="innerlist sub-menu collapse" id="TPs">
                        <li><a routerLink="/teacher/mytps"><i class="fas fa-chevron-circle-right"></i> Mes Tps</a></li>
                        <li><a routerLink="/teacher/createtp"><i class="fas fa-chevron-circle-right"></i> Créer un TP</a></li>
                    </ul>
                </li>
                <li><a class="collapsed collapse active" data-target="#Classes" data-toggle="collapse"
                       (click)="unwindOnCollapsed()"> <!--unwindOnCollapsed() check if the navbar is collapsed and uncollapse it if I click here-->
                    <i class="fa fa-table"></i> <span class="nav-label">...</span><span
                        class="fa fa-chevron-left float-right"></span></a>
                    <ul class="innerlist sub-menu collapse" id="Classes">
                        <li>...</li>
                        <li>...</li>
                    </ul>
                </li>
            </ul>
            <li><a
                    (click)="disconnect()" id="disconnected"><i class="fas fa-sign-out-alt"></i><span
                    class="nav-label">...</span></a>
            </li>
        </ul>
        <li><a><i class="fa fa-users"></i><span class="nav-label">...</span></a></li>
        <li><a><i class="fa fa-globe"></i><span class="nav-label">...</span></a></li>
    </ul>
</div>
4

0 回答 0