Question

我正在使用带有Angular Bootstrap的模板。我试图用鼠标悬停而不是单击鼠标时调用下拉事件。我怎么称呼这个事件？

<div ngbDropdown class="d-inline-block dropdown">
    <a class="navbar-brand" id="dropdownBasic1" href="#basiccomponents" ngbDropdownToggle>Learning</a>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropdown-primary">
            <a class="dropdown-item">Learning Outcomes</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item">Learning Plan</a>
        </div>
    </div>

Answer 1

dropdown API具有toggle()方法以及显式open()和close()。通过绑定到(mouseenter)和(mouseleave)事件在悬停时调用它们。

以下是基础知识，这不是完整的示例。您需要提供下拉菜单的参考。

<div ngbDropdown class="d-inline-block dropdown" (mouseenter)="onHover($event)" (mouseleave)="onHover($event)">
  ...
<div>


onHover(event): void {
  this.myDropDown.toggle();
}

Answer 2

尝试使用带有mouseleave和mouseenter偶数的角形材料。

参考：https://www.thetopsites.net/article/54301126.shtml#:~:text=To%20hide%20menu%2C%20add%20mouseleave%20event%20for%20a%20menu.&text=Demos%20%3E%20Menu%2C%20Now%20on%20clicking,library%20to%20construct%20UI%2FUX。演示：https://stackblitz.com/edit/example-angular-material-toolbar-menu-wrut3v

如何使ngDropdown菜单在悬停而不是单击时起作用？

2 个答案: