菜单手风琴与切换按钮

Question

事实上，当我点击菜单时，例如administration标题

步骤1

我点击切换按钮

步骤2

切换按钮激活

步骤3

我再次点击按钮切换

步骤4

这是我的问题，添加了一个空行<li>。

步骤5

如何删除这条空行？

dashboard.component.html

<div class="sidebar" [ngClass]="{ active: showSideBar }">
<div class="logo-details">
<span class="logo_name">
<img class="logo_dashboard" src="assets/images/logo_FR.gif" style="border-bottom: 1px solid grey">
</span>
</div>
<ul id="accordion" class="accordion">
<li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
<ng-container>
<div class="menu" (click)="selectMenu(menu)">
<i [class]="menu.iconClass"></i> {{ menu.name }}
<i class="fa fa-chevron-down"></i>
</div>
<ul class="submenu" #submenu [ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' }">
<li *ngFor="let submenu of menu.submenu">
<a routerLink="{{ submenu.url }}"> {{ submenu.name }} </a>
</li>
</ul>
</ng-container>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<div class="menu-container">
<i class="bx bx-menu sidebarBtn" (click)="toggleSideBar()"></i>
</div>
<div class="menu-summary-container">
<span class="user">Utilisateur:  </span>
<span class="last-connection">La dernière connexion est le :

</span>
</div>
</div>
</nav>
<router-outlet></router-outlet>
</section>

此处提供代码。

谢谢你的帮助。

Answer 1

它不是一个空的li标记。您正在使用设置高度

[ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' }"

其在像素中添加原始内联样式。

为了解决这个问题，你可以重新设计你的手风琴，使其更清晰、更简单(也许可以使用现有的组件，因为你的组件对于这么简单的东西来说似乎真的很复杂(，或者使用display:这样的高度之外的另一个属性

[ngStyle]="{display: menu.active ? 'initial' : 'none'}"

并根据您的需要重新设计样式和动画。