logo标签列表

点击菜单外部关闭Bootstrap导航栏时，导航栏会出现“闪烁”现象。

htmlcssangularjstwitter-bootstrap
8

我在导航栏上遇到了一个问题，当你点击菜单以外的地方关闭菜单时会出现“闪烁”的情况。如果在点击菜单以外的地方时按住鼠标不放，闪烁会持续存在，如下图所示：

我认为这可能与Angular有关，而不是CSS，主要是因为其他人在fiddle上无法复制它。 此前的问题在这里。 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>

        <!--has to do with the link, clicking it and 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：

[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}
.navbar-custom {
    background-color: #586F7C;
}
.navbar-custom a {
    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;
}
.nav >li > a:hover, .nav > li > a:focus {
  background-color: #586F7C;
}

在引用导航栏的文件中使用ng-include。
<div ng-include="'html/navbar.html'"></div>

index.html中引用导航栏ng-include文件的部分

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

我认为问题可能出在ng-view或ng-include上，但到目前为止，之前问题中的解决方法都没有奏效。

你能创建一个Plunker（https://plnkr.co）吗？ - Vucko
哇，我在创建一个 Plunker 时发现了问题。谢谢！ - Left
3个回答
2

一个快速的技巧可能是在你的CSS中添加以下内容

.nav >li > a:hover, .nav > li > a:focus {
    background-color: #586F7C;
}

编辑：我刚刚意识到您已经在另一个帖子中看到了这样的解决方案，但我能够复制“您的错误”。这里是一个 bootply，只需尝试注释掉 css，bug 就会存在，使用 css 时它按预期工作。

我已经在我的样式表中有了完全相同的CSS，但它似乎无法解决闪烁问题。 :( - Left
0
一点jQuery就能解决这个问题。只需为闪烁的锚标签添加以下内容即可。

```

  $('.navbar-custom .navbar-nav li a').on('mouseup', function(){
      $(this).blur();
  });

```

0

问题出在这里：

.navbar .navbar-nav > li.open > a, {
    background-color: #586F7C;
}

那个额外的“，”就是问题所在。结果只是一个语法错误，真是尴尬哈哈。难怪一切似乎都应该正常工作，只是一个小逗号放错了位置！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接