Angular 2：如何实现悬停上下文菜单功能

Question

我想实现一个类似于 Google Inbox 悬停上下文菜单的组件：

想知道如何以可重复使用的方式实现它，我主要担心的是：

1. 我应该如何正确地显示/隐藏它？
2. 如何正确安排定位？

欢迎任何帮助。

Answer 1

我可能会在菜单项组件中添加一些代码，这会在悬停时触发display: block 和display: none。如果您使用*ngFor 显示菜单项，它看起来是完成您想要的最简单的方法。

猜你的代码如下：

<ul class="menu-list">
    <li *ngFor="let item of menu.items" class="menu-item">
        <span class="content"> <!-- content --> </span>
        <span class="date-and-check"> <!-- date and check mark --> </span>
        <span class="submenu"></span>
    </li>
</ul>

那么 CSS 会看起来像这样：

.menu-list .menu-item {
    width: calc(100% - 80px);
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }

 .menu-list .menu-item date-and-time {
    width: 80px;
    height: 40px;
 }

 .menu-list .menu-item .submenu {
    width: 100px;
    height: 40px;
    display: none;
 }

.menu-list .menu-item:hover {
    width: calc(100% - 100px);
}

.menu-list .menu-item:hover .date-and-time {
    display: none;
}

.menu-list .menu-item:hover .submenu {
    display: inline-block;
}