Trouble using toggleClass on bootstrap's icon-bar
in Using jQuery
•
5 years ago
I am creating a special "hamburger" icon which, when hovered over, changes from transparent with white lines to yellow with black lines. Because I want the lines to change color when you hover over any portion of the box, I assumed that I would need to use jQuery (or at least javascript) to add a class to the icon-bars. I am having trouble figuring out how to do this.
First, here is the HTML I'm trying to manipulate:
- <nav role="navigation" class="navbar-default nav-container">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse nav-container">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
I currently have a function within the $(document).ready function to toggle adding/removing a class that would make the lines black. In my CSS file, I created a class (blk-icon-bar) which sets the background color to black:
- .blk-icon-bar {
background-color:#000;
}
And here is the JQuery function I'm trying to use:
- $(document).ready(function() {
$(".navbar-toggle").hover(function(e) {
$(".icon-bar").toggleClass("blk-icon-bar");
});
});
I added an alert within the hover function to ensure that I was getting into the function and the alert does appear but, none of the lines change color. What am I doing wrong with this code? Any and all help would be greatly appreciated.
Chris
1