我正在学习 CSS,现在我已经掌握了:
https://jsfiddle.net/marquesm91/ahwxwyca/
基本上,我想突出显示我单击的元素,并在我单击元素外部时保持突出显示。当我在元素之间切换时,它只会突出显示实际元素。
$(function() {
$('#menu').metisMenu({
toggle: false // disable the auto collapse. Default: true.
});
});
#menu a:hover,
#menu a:focus {
color: #fff;
background-color: #2a6496;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<aside class="sidebar">
<nav class="sidebar-nav">
<ul class="metismenu" id="menu">
<li>
<a href="#" aria-expanded="false">Menu<span class="glyphicon arrow"></span></a>
<ul aria-expanded="false">
<li><a href="#">item 2.1</a>
</li>
<li><a href="#">item 2.2</a>
</li>
<li><a href="#">item 2.3</a>
</li>
<li><a href="#">item 2.4</a>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
</div>
</div>
</div>
到目前为止,我的 CSS 对我没有帮助。有什么建议吗?
最佳答案
CSS 可以与悬停交互,但无法按照您描述的方式与点击交互。您将需要 Javascript。
$('#menu').find("a").click(function(){
$(this).css("background-color","#2a6496");
$(this).css("color","#fff");
});
这是一个 fiddle .
PS,在使用 jQuery 时,一定要从 JS 菜单中选择 jQuery。
也许这更接近你想要的:
$('#menu').find("a").focus(function() {
$('#menu').find("a").each(function() {
$(this).css("background-color", "initial");
$(this).css("color", "initial");
});
$(this).css("background-color", "#2a6496");
$(this).css("color", "#fff");
});
https://jsfiddle.net/zq0cpohb/
这只会突出显示最后单击的元素..
关于javascript - 保持我的 CSS 即使我在元素外点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40403197/