单击外部后如何更改导航栏中下拉菜单的颜色？ -引导程序 3答案

【问题标题】：How to change the color of my dropdown in my navbar after clicking outside? -Bootstrap 3单击外部后如何更改导航栏中下拉菜单的颜色？ -引导程序 3
【发布时间】：2016-02-18 13:36:26
【问题描述】：

我正在尝试使用 Bootstrap 3 构建模板，但遇到了这个问题。

在我的默认导航栏中，我有一个下拉菜单。默认情况下，下拉切换的字体是带有透明背景的灰色。悬停时，灰色变为白色。点击后，下拉菜单打开，切换按钮本身变为白色，其背景颜色变为较深的蓝色阴影（焦点和活动）。

但是，如果我在下拉菜单打开的情况下单击外部的任何位置，那么切换字体的颜色会变成深灰色，而背景会变成云色。大约一秒钟后，它恢复正常。这对我来说非常刺耳，我似乎无法找到负责此的 CSS。（我正在使用引导程序 3）

无论如何，看看这个image 以更好地理解我的意思。

顺便说一句，这是在我的导航栏上。

最后，这是我的代码：

html

<nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><span class="brand-name"> My brand</span></a>
            </div>


        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-user"></i> Username</a>
              <ul class="dropdown-menu">
                <li><a href="#">Account</a></li>
                <li><a href="#">My reviews</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Logout</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

我正在使用此 CSS 代码更改悬停、活动和焦点的颜色：

.navbar-default .navbar-nav .dropdown .dropdown-toggle:focus,
.navbar-default .navbar-nav .dropdown .dropdown-toggle:hover,
.navbar-default .navbar-nav .dropdown .dropdown-toggle:active {
    color: #fff;
    background-color: ((Dark blue color code));
 }

有什么方法可以改变它，让它恢复正常，而不是 1 秒的颜色变化？

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

试试这个

.navbar-default .navbar-nav .dropdown .dropdown-toggle{ 选择你想要的颜色 } .navbar-default .navbar-nav .dropdown .dropdown-toggle:focus, .navbar-default .navbar-nav .dropdown .dropdown-toggle:hover { 颜色：#fff; 背景颜色：（（深蓝色代码））； }

【讨论】：