仅在点击

Question

我在菜单栏中使用PrimeNG 7.1.3。当前，它们具有autoDisplay: true(for mouse enter) or false(for mouse click)属性，在该菜单上，通过鼠标输入或单击可以显示该子菜单。但是，在使用点击时，并不会保持这种状态。

因此，最初，该子菜单没有在鼠标悬停时显示，但是当我单击时，该子菜单会显示，但是当我将鼠标悬停在另一个菜单项上时，该子菜单会隐藏（这是我不想要的）。我希望子菜单保持显示状态，即使我将鼠标悬停在另一个菜单项上也是如此。我该怎么办？

代码（来自教程）：

app.component.html

<p-menubar [model]="items" [autoDisplay]="false">
</p-menubar>

app.component.ts

export class AppComponent implements OnInit {
  title = 'MockMenuBar2';
  items: MenuItem[];

  ngOnInit() {
    this.items = [
      ...
    ];
  }
}

输出：

任何线索都将有所帮助。我只是不想在将鼠标悬停在其他菜单项上时隐藏子菜单。

Answer 1

假设您了解 autoDisplay 的属性行为，但是可以通过在click事件上简单地添加或删除类来实现。

<p-menubar [model]="items" [ngClass]="{'my-class': this.showMenu ==true}" (click)="clicked($event)">
</p-menubar>



 clicked(event=1) {
     this.showMenu = !this.showMenu
    }

上一堂课 我的班级将显示属性添加为无，并应用该属性， 希望如此工作

Answer 2

您不能使用库本身来做到这一点。

我建议使用ui-menuitem和HostListener向jQuery添加新的类名和样式。

将jQuery导入index.html，并在组件顶部添加declare var $: any;。然后将以下代码添加到组件中

@HostListener('document:click', ['$event']) onMouseOver(event) {
  const $parentMenuItem = $(event.target).closest('.ui-menuitem.ui-menu-parent');
  if ($parentMenuItem) {
    if ($parentMenuItem.hasClass('ui-menuitem-force-active')) {
      $parentMenuItem.removeClass('ui-menuitem-active');
      $parentMenuItem.removeClass('ui-menuitem-force-active');
    } else {
      $('.ui-menuitem.ui-menu-parent').removeClass('ui-menuitem-active');
      $('.ui-menuitem.ui-menu-parent').removeClass('ui-menuitem-force-active');
      $parentMenuItem.addClass('ui-menuitem-active');
      $parentMenuItem.addClass('ui-menuitem-force-active');
    }
  }
}

在style.css（全局样式表）中添加以下CSS代码。

.ui-menubar .ui-menuitem-force-active > .ui-submenu > .ui-submenu-list {
    display: block;
}

我在这里创建了一个工作示例。 https://stackblitz.com/edit/angular-h4mpjt