我有此响应式可折叠菜单。
<nav class="navbar navbar-default">
<div class="container-fluid col-md-12">
<div class="col-md-2"></div>
<div id="logo" class="col-md-3"></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse col-md-6" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Things</span> <!-- <span class="caret"></span> --></a>
<ul class="dropdown-menu">
<li><a href="#"><span>Drop1</span></a></li>
<li><a href="#"><span>Drop2</span></a></li>
</ul>
</li>
<li><a href="#"><span>Carriers</span></a></li>
<li><a href="#"><span>Contacts</span></a></li>
</ul>
</div>
</div>
</nav>
我添加了以下代码以添加和删除“活动”类以进行样式设置:
<script>
var selector = '.nav li';
$(selector).on('click', function() {
$(selector).removeClass('active');
$(this).addClass('active');
});
</script>
问题是,我无法为活动菜单项设置背景颜色。我已经尝试了所有我能想到的一切以及我能找到的一切,但是都没有成功。由于某种原因,我无法更改引导程序默认颜色。其他所有功能都可以正常工作,我能够设置其他元素的样式,但是由于某些原因,这不能做到。这是一个JSFiddle
更改selector
为.nav li a
。因为CSS类active
是为设置的,li
而您的样式是针对的li > a.active
。
也可e.stopPropagation();
用于防止事件冒泡到父元素。
var selector = '.nav li a';
$(selector).on('click', function() {
$(selector).removeClass('active');
$(this).addClass('active');
e.stopPropagation();
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句