Question

你知道如何在Facebook上，当你收到通知时，地球变白，然后你点击它看到它们，因为你很高兴。除非您单击或单击地球仪，否则颜色在地球上保持白色。我有完全相同的情况。但是当我点击地球仪时。我的图标保持白色。除非我在任何地方点击，否则它会失去那种白色。我希望能够点击图标，然后期望颜色消失。

SCSS：

.navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
.nav-badges {
  margin-left: 20px;
  & > li { height: 50px; }
  .dropdown > a:focus { outline: 0px none; }
  .dropdown-open {
    background-color: $dropdown-bg;
    & > a { color: $dropdown-link-color; }
    .dropdown-menu { display: block; }
  }

它非常自我解释，当没有点击图标时，下拉列表正在播放，当点击它时，下拉列表打开正在播放。

Answer 1

所以肯定facebook会使用ReactJs的一些JavaScript技巧，这很简单。

但是，我认为你可以使用带有隐藏复选框和标签的CSS3技巧。 This trick looks to match perfectly your use case.

这对于可访问性来说很糟糕，它很棘手，你应该选择一些JavaScript。但它很有趣。

您可以添加固定的叠加层，也可以取消选中隐藏的复选框。像这样，当在菜单外单击时，将取消选中该复选框，您的菜单将恢复正常状态。

这是我能看到的唯一纯CSS实现。但是，再次使用JavaScript来实现这种行为。

css没有改变点击的颜色

1 个答案: