使用引导程序更改单击的导航栏下拉菜单的颜色答案

【问题标题】：Changing color of clicked navbar dropdown, using bootstrap使用引导程序更改单击的导航栏下拉菜单的颜色
【发布时间】：2016-03-21 19:07:43
【问题描述】：

再次单击配置文件图标以摆脱菜单时，除非您单击其他位置，否则它不会变回导航栏颜色。我认为这是控制链接的导航栏 css 之一的问题，但我很难找到它是哪一个。

HTML：

<nav class='navbar navbar-default.navbar-static-top navbar-custom'>
  <div class='container-fluid'>
    <ul class='nav navbar-nav navbar-left'>
      <li><a href="dashboard.html">Dashboard</a></li>
      <li><a href="/grades">Grades</a></li> 
      <li><a href="/classes">Classes</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-right'>
      <li><a href="/messages"><i class="fa fa-envelope fa-lg"></i></a></li>

        <!--probably has to do with the link, clicking it then clicking it again-->
      <li><a class="dropdown-toggle dropdown-custom" data-toggle="dropdown" href="/profile"><i class="fa fa-user fa-lg"></i></a>
        <ul class="dropdown-menu">
          <li><a href="/profile.html">Edit profile</a></li>
          <li><a href="/settings">Edit Preferences</a></li>
        </ul>
      </li>
      <li><a href="/logout"><i class="fa fa-power-off fa-lg"></i></a></li>    
    </ul>

  </div>
</nav>

CSS：

.navbar-custom {
    background-color: #586F7C;
}
.navbar-custom a {
    color: #F4F4F9;
}
.navbar-custom a:hover {
    color: #F4F4F9;
}
.navbar-custom .nav > li > a:hover {
    background-color: #2F4550;
}
.navbar .navbar-nav > li.open > a {
    background-color: #586F7C;
}
.navbar .navbar-nav > li.open > a:hover,
.navbar .navbar-nav > li.open > a:focus {
    background-color: #2F4550;
}

编辑：这是它的样子。 http://i.stack.imgur.com/tvWD0.gif

如果您在导航栏外部单击以摆脱菜单，那很好。当您再次单击图标以摆脱菜单，然后将鼠标移出图标框时，就会出现问题。

Edit2: ng-include 在引用导航栏的文件中

<div ng-include="'html/navbar.html'"></div>

Edit3：index.html 的一部分，它引用了导航栏包含在其中的文件

<body>
 <div class="view-container">
     <div ng-view class="view-frame"></div>
 </div>
</body>

Edit4：原问题已修复！但是，现在的问题是鼠标在菜单外点击时按住不放闪现：

【问题讨论】：

这个 sn-p 很难按原样诊断，您是否查看过 a:active 了吗？
我添加了一张图片来帮助描述它。我尝试了一个：活动，但我想我正在寻找它什么时候不活动？
所以这里是你的代码，但我无法重现你的 gif 中显示的行为：jsfiddle.net/qkx6etrh
如果您单击配置文件图标一次以获取下拉菜单，然后再次单击配置文件图标并将鼠标移动到其他位置，那么它将表现出相同的行为。刚刚用 chrome 和 firefox 在小提琴中进行了测试。

标签： html css twitter-bootstrap

【解决方案1】：

这是您的代码的固定版本：

https://jsfiddle.net/6psjb0c5/

我添加了以下似乎可以解决问题的内容：

.nav>li>a:hover, .nav>li>a:focus {
  background-color: transparent;
}

【讨论】：

解决了！但是，现在当我在导航栏外点击关闭菜单时，突然闪现如下：i.imgur.com/2tbZ0mh.gifv
是否还有其他影响菜单的 CSS。我无法在小提琴上重现它。
没有，但是我通过 angularjs 运行导航栏，使用 ng-include 将导航栏包含在页面上。这可能是问题，但是..
它发生在小提琴上吗？您可以发布角度 ng-include 部分吗？
这不是在小提琴上发生的，只是经过测试。在我的本地文件上，如果您单击其他地方，则会发生“flash”，如果您按住该点击，那么也会按住 flash。似乎它可能默认为原始的 navbar-static-top 颜色？我将在 OP 中发布角度部分。

【解决方案2】：

删除：

.navbar-custom a:hover {
color: #F4F4F9;
}

这应该可以解决问题

【讨论】：

感谢您的发现，这是我最初使用 a:hover 时的多余代码。但是，遗憾的是这并不能解决问题，我编辑了 OP 以包含问题的 gif 图像！

【解决方案3】：

好吧，我来自巴西，以防有些话没有意义。我遇到了同样的问题，但是如果您检查代码并在外部执行单击和单击操作，您会注意到添加了 .open 类。但是，下拉菜单是 (a) 而不是 (li > a)。很快代码如下：

.nav .open a, .nav .open a:focus, .nav .open a:active {
 background-color: #2F4550; /*background-color: trasparent;*/
}

【讨论】：