css - 我想在单击列表项时隐藏 ul 项而不影响其功能!查看说明以获取更多信息

Question

我创建了一个 <ul>与一些<li> ，我使用这些列表项来导航用户，如图所示。现在的问题是我想在用户点击任何 li 时隐藏 ul。
重要的一点是我使用了 Angular routerLink 功能在不同页面之间导航用户。

我尝试使用 :active它工作正常，但它破坏了导航功能，我不知道为什么，所以什么是更好的主意？

除此问题外，一切正常。

我有以下代码:

<div class="account-wrapper">
        <button routerLink="/auth/login" *ngIf="authenticated" class="account-btn">
          <i class="material-icons">
            account_circle
          </i>
        </button>
        <ul class="account-group">

          <li class="account-group-item">My Profile</li>
          <li class="account-group-item" routerLink="/cart">
            <i class="material-icons">
              shopping_cart
            </i>Cart</li>

          <li class="account-group-item">
            <i class="material-icons">
              payment
            </i>My Orders</li>

          <li class="account-group-item">
            <i class="material-icons">
              favorite
            </i>Whishlist</li>

          <li class="account-group-item" (click)="onLogout()">
            <i class="material-icons">
              exit_to_app
            </i>Logout</li>

        </ul>
      </div>
    </div>

CSS 代码

.account-wrapper {
  position: relative;
}

.account-btn {
  border: none;
  background: transparent;
}

.account-btn>i {
  font-size: 2rem;
  vertical-align: middle;
  cursor: pointer;
}

.account-group {
  position: absolute;
  top: 30px;
  left: -90px;
  pointer-events: none;
}

.account-btn:hover~.account-group > .account-group-item ,
.account-group:hover > .account-group-item{
  transform: rotate(0);
}

.account-group > .account-group-item:active {
    transform: scale(.9, .9);
}

.account-btn:hover~.account-group,
.account-group:hover {
    pointer-events: initial;
}

.account-group-item {
  width: 180px;
  background: #fff;
  text-align: left;
  padding: .5rem 0 .5rem .8rem;
  font-size: .9rem;
  cursor: pointer;
  transform: rotateX(90deg);
  transition: transform .2s ease;
}

.account-group-item>i {
  font-size: 1rem;
  vertical-align: middle;
  margin-right: .3rem;
}

.account-group-item:hover {
  background: #e9e9e9;
}

Answer 1

根据我在评论中提出的理解。 单击列表项时，您想导航到其他路线并关闭菜单项，该菜单项出现在公共(public)标题中，该标题将出现在所有页面中

问题出在这一行

I tried to use :active and it works fine but It broke the navigating functionality, I don't know why, so what would be a better idea?

Now when you are using CSS to hide the your menu, your menu is getting hidden before your click event is triggered, that's why your navigation is breaking

要解决此问题，请不要只使用 css 隐藏您的菜单，而不是像您在该函数中为注销功能所做的那样在单击事件上调用一个函数来隐藏菜单。使用 bool 标志或通过添加和删除 css 类。

我希望这足以解决您的问题 如果你想要进一步的解释，你可以分享一个工作 fiddle ，我会在那里解决你的问题