使用引导更改单击的导航栏下拉菜单的颜色 [英] Changing color of clicked navbar dropdown, using bootstrap
问题描述
当再次点击配置文件图标以摆脱菜单时，除非您点击其他地方，否则不会重新转换为导航栏颜色。我认为这是一个控制链接的navbar 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>信息中心< / a>< / li>
< li>< a href =/ grades>成绩< / a>< / li>
< li>< a href =/ classes>类< / a>< / li>
< / ul>
< ul class ='nav navbar-nav navbar-right'>
< a>< a href =/ messages>< i class =fa fa-envelope fa-lg>< / i>< / a>< / li>
<！ - 可能与链接有关，点击它然后再次点击它 - >
< li>< a class =dropdown-toggle dropdown-customdata-toggle =dropdownhref =/ profile>< i class =fa fa-user fa-lg >< / I>< / A>
< ul class =dropdown-menu>
< li>< a href =/ profile.html>编辑个人资料< / a>< / li>
< li>< a href =/ settings>编辑偏好设定< / a>< / li>
< / ul>
< / li>
< a href =/ logout>< i class =fa fa-power-off fa -lg>< / i>< / a><李>
< / 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>一个{
背景颜色：＃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文件中引用了navbar
< div ng-include ='html / navbar.html'>< / div>
编辑3：index.html的一部分，它引用文件，navbar包含在
< body>
< div class =view-container>
< div ng-view class =view-frame>< / div>
< / div>
< / body>
编辑4：原始问题已修复！然而，现在当前的问题是，如果在点击菜单时按住鼠标，闪光仍然存在：
以下是您的代码的固定版本：
https://jsfiddle.net/6psjb0c5/
我添加了以下内容，它似乎可以解决这个问题：
.nav> li> a ：hover，.nav> li> a：focus {
background-color：transparent;
}
When clicking the profile icon again to get rid of the menu, it doesn't turn back into the navbar color unless you click somewhere else. I think it's an issue with one of the navbar css that controls links but I'm having some trouble finding which one it is.
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;
}
Edit: Here's what it looks like. http://i.stack.imgur.com/tvWD0.gif
If you click outside of the navbar to get rid of the menu, it's fine. The problem arises when you click again on the icon to get rid of the menu, and then move your mouse outside of the icon box.
Edit2: ng-include in the file the navbar is referenced in
<div ng-include="'html/navbar.html'"></div>
Edit3: portion of index.html where it references the file that the navbar is ng-included in
<body>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
Edit4: The original problem has been fixed! However, now the current issue is that the flash persists if the mouse is held down when clicking out of the menu:
Here is a fixed version of your code:
https://jsfiddle.net/6psjb0c5/
I added the following which seems to fix the behaviour:
.nav>li>a:hover, .nav>li>a:focus {
background-color: transparent;
}
这篇关于使用引导更改单击的导航栏下拉菜单的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://i.stack.imgur.com/tvWD0.gif](\"https://i.stack.imgur.com/tvWD0.gif\"){kind=link}
