单击菜单外部以关闭菜单时,Bootstrap 导航栏“闪烁”

2024-05-09

我遇到了导航栏问题,当您单击菜单外部以关闭菜单时,导航栏会出现“闪烁”。如果在单击菜单外时按住鼠标,则闪烁会持续存在,如下所示:

我认为这可能与角度有关,而不是与CSS有关,主要是因为其他人未能在小提琴上复制它。上一个问题在这里。 https://stackoverflow.com/questions/36139568/changing-color-of-clicked-navbar-dropdown-using-bootstrap

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 的一部分,其中引用了导航栏包含在其中的文件

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

我认为问题可能出在 ng-view 或 ng-include 上,但是到目前为止,上一个问题中的修复都没有起作用。


一种快速技巧可能是将其添加到您的 css 中

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

编辑:我刚刚意识到您已经在另一个线程中看到了这样的解决方案,但我能够复制“您的错误”。这是一个 bootply http://www.bootply.com/Uj9L1LDxSE,只需尝试注释掉 css,错误就会出现,而 css 则可以按预期工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击菜单外部以关闭菜单时,Bootstrap 导航栏“闪烁” 的相关文章

  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31
  • 对一组复选框使用 HTML5“必需”属性?

    使用支持 HTML5 的较新浏览器 例如 FireFox 4 时 并且表单字段具有属性required required 并且表单字段为空 空白 然后点击提交按钮 浏览器检测到 必填 字段为空 并且不提交表单 相反 浏览器会显示一条提示 要
  • 使用 CSS 自定义字体?

    我见过一些在其网站上使用自定义字体的新网站 除了常规的 Arial Tahoma 等 他们支持大量的浏览器 如何做到这一点 同时 如果可能的话 还会阻止人们免费下载该字体 一般来说 您可以使用自定义字体 font face在你的 CSS 中
  • 如何处理并不总是返回承诺的函数?

    处理函数并不总是返回 Promise 的情况的最佳方法是什么 我的实际代码太复杂 无法解释 但问题的本质归结为检查条件 根据它 我要么返回一个局部变量 要么需要发送一个 ajax 请求 像这样的事情 function example val
  • 我如何在 AngularJS 中监听点击并按住的情况?

    我制作了一个时间计数器 您可以通过单击按钮来增加或减少时间 然而 我希望当我单击并按住按钮时 时间的价值会不断攀升 所以目前如果你看到我的Plunkr http plnkr co edit BxX9x5zYFMXVqt5JsN1F p pr
  • 如何将udp发送到udp node.js服务器?

    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js
  • 调整文本区域大小

    我需要使用文本区域来显示一些文本 问题是 如果我放置 4 5 行文本 就会出现滚动条 如何使用 CSS HTML 使文本区域与其内容一样大 没有滚动条 文本区域不需要动态更改其大小 我仅使用它来显示文本 我也可以使用禁用的文本区域 我希望文
  • 来自 JSON 的 Angular 8 动态表单

    我正在尝试从 JSON 模式递归生成动态表单 但我正在努力解决找不到表单控件的问题 这是代码示例 我收到这个错误 错误错误 找不到名称为 createdAt 的控件 我尝试了不同的方法 但仍然存在问题 我知道我错过了一些东西 所以请帮忙 任
  • Modernizr - 加载 polyfills / 使用自定义检测的正确方法

    我想在网页上使用一些新的 HTML5 表单属性和输入类型 有些浏览器已经支持它们 有些浏览器不支持 也永远不会支持 这就是我想使用 Modernizr 的原因 这就是我的麻烦开始的原因 据我了解 Modernizr 本身并不是一个 poly
  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
  • 如何为背景图像添加边距?

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎
  • 如何使用 JavaScript 获取没有 HTML 元素的纯文本?

    我的 HTML 中有 1 按钮和一些文本 如下所示 function get content I don t know how to do in here
  • 切换到移动屏幕尺寸时自动关闭 Bootstrap 手风琴面板

    使用 Bootstrap 2 3 2 我有一个带有单个面板的手风琴 该面板在加载页面时打开 div class accordion div class accordion heading a class accordion toggle h
  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 如何在背景剪辑中包含文本装饰:文本;影响?

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗

随机推荐

  • 从字符串中删除货币符号并使用 Javascript 中的单行转换为数字

    我下面有一个字符串 它是以英镑为单位的价格 我想删除货币符号 然后将其转换为我可以用来与另一个值进行比较的数字 价格 例如 X gt Y 14 50 我之前已将字符串转换为用于货币的数字 var priceNum parseFloat pr
  • 如何让material-ui文本字段中的标签位于右侧?

    我在用着material ui and typescript对于我的 React 项目 rtl 布局 我不知道如何将文本字段的标签放在右侧 找到了更好的方法without外部库 export const theme createTheme
  • 为什么matlab的mldivide比dgels好这么多?

    Solve Ax b 真正的双 A是超定的 Mx2 其中 M gt gt 2 b是MX1 我运行了大量的数据mldivide 并且结果非常好 我用 MKL 写了一个 mex 例程LAPACKE dgels但它远没有那么好 结果有大量噪音 并
  • 网页抓取(R 语言?)

    我想获取中间栏中的公司名称this http www consumercomplaints in bysubcategory mobile service providers page 1 html页面 以蓝色粗体书写 以及登记投诉者的位置
  • 如何使用 RxJava 处理分页?

    我正在考虑将我的 Android 应用程序转换为使用 Rxjava 进行网络请求 我目前访问的网络服务类似于 getUsersByKeyword String query int limit int offset 据我了解 Observab
  • 在 Swift 2.0 中隐藏 Home 指示器

    我希望隐藏 Home Indicator 虽然这在 Swift 中很简单 但在 SwiftUI 中似乎并不那么容易 我尝试使用这个 如何使用 SwiftUI 隐藏 home 指示器 https stackoverflow com quest
  • 在 HTML SELECT 标记中禁用键盘

    我想禁用 HTML SELECT 标记的键盘 以便用户只能使用鼠标来选择选项 我试过了event cancelBubble true on the onkeydown onkeyup and onkeypress没有运气的事件 有任何想法吗
  • PrintStream是有缓冲的,但是flush不会降低性能,而BufferedOutputStream会加速性能

    我预计由于 PrintStream 是缓冲的 通过在每次 print 之后添加刷新操作 速度性能应该会显着降低 但事实并非如此 如下面的代码片段所示 此外 将 PrintStream 包裹在 BufferedOutputStream 周围可
  • Channel.Security.Error...错误 #2048

    我最近升级到 PHP 版 Flash Builder 4 5 并尝试将发布版本上传到我的远程服务器 当我尝试从应用程序进行 php 调用时 出现错误 Send failednChannel Security Error error Erro
  • Rails 应用程序中的持久 TCP 连接

    我有一个在服务器上运行的第三方应用程序 它对客户端进行身份验证并返回响应 我的问题是 对于我收到 Rails 应用程序的每个请求 我都需要建立 TCP 连接并获取数据 是否可以有一个持久连接 以便我可以减少建立连接的开销 我希望你使用的是
  • Android 视图上的动态气泡

    任何人都可以如何在Android布局上制作可点击的动态气泡 我的设计师对屏幕的想法如下 我的图像中所有气泡都是分配给用户的一组任务 气泡的标签根据任务而变化 1 1 根据我的项目要求 颜色和半径将根据 api 响应而变化 您能建议任何演示或
  • RedGate ReadyRoll 的替代品了吗? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一种经济实惠的 RedGate ReadyRoll 替代方案 以实现 SQL 的持续部署 我
  • Azure PostgreSQL 服务器服务排序规则创建错误

    我正在尝试将当前现有数据库导入到 Azure PostgreSQL 服务器上运行的 postgre 实例 我已经将我的azure postgresql服务器参数配置为使用UTF8编码 我不确定它是否在不重新启动的情况下应用 但即使我没有重新
  • 如何在 phpfarm php 安装上安装 pthreads

    记录我为帮助他人所做的努力 并希望得到一些关于我如何做得更好的反馈 命令pecl install pthreads由于我的 php 安装失败ubuntu 13 04盒子没有配置 zts Options 1 ubuntu存储库没有启用zts的
  • 如何在xampp中启用curl

    我面临下面给出的错误 致命错误 在第 11 行调用 E xampp htdocs new functions php 中未定义的函数curl init 我已经做出了改变php ini 我把前面的分号去掉了 extension php cra
  • 实体框架中的嵌套查询

    我收到以下异常 不支持嵌套查询 操作 1 案例 操作 2 收集 通过这个查询 var Games context Games Select a gt new GameModel Members a Type 1 a UsersInGames
  • 横向 xib 显示为纵向

    我有一个视图控制器和单独的纵向和横向笔尖文件 旋转时 我加载相应的笔尖 方法 shouldAutorotateToInterfaceOrientation and willRotateToInterfaceOrientation 接到电话
  • 绘制“plot”而不是“scatter”时,图例选择会中断

    再会 这个问题是后续问题为什么图例选取仅适用于 ax twinx 而不适用于 ax https stackoverflow com q 60167378 9282844 下面提供的最小代码分别绘制了两条曲线ax1 and ax2 ax1 t
  • 在R中绘制3x3方形网格

    我得到了一个数字列表 n 9 想将它们画在一个 3 3 的正方形网格中 每个网格填充相应的数字 我如何在 R 中执行此操作而不安装额外的软件包 例如情节 非常感谢 这里有一个ggplot解决方案比我预期的要难一点 Setup the dat
  • 单击菜单外部以关闭菜单时,Bootstrap 导航栏“闪烁”

    我遇到了导航栏问题 当您单击菜单外部以关闭菜单时 导航栏会出现 闪烁 如果在单击菜单外时按住鼠标 则闪烁会持续存在 如下所示 我认为这可能与角度有关 而不是与CSS有关 主要是因为其他人未能在小提琴上复制它 上一个问题在这里 https s