I am using bootstrap with dropdown. My anchor has a background color on hover. But when the dropdown is showing i want the parent containing the dropdown to lose the background color.
My HTML is:
<nav class="navbar navbar-default av-nav" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav nav-tabs">
<li class="lia li1"><a href="#">Home</a></li>
<li class="dropdown li2"><a class="dropdown-toggle" data-toggle="dropdown">About</a><span class="nav-arrow"></span>
<div class="dropdown-menu">
<ul>
<li><a href="#">Drop 1</a></li>
<li><a href="#">Drop 2</a></li>
<li><a href="#">Drop 3</a></li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
My attempt at this:
$( document ).ready(function() {
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768)
section.addClass('nobg');
});
The CSS:
.nobg {background: none!important;}
What am I doing wrong that my code is not working?
I am using bootstrap with dropdown. My anchor has a background color on hover. But when the dropdown is showing i want the parent containing the dropdown to lose the background color.
My HTML is:
<nav class="navbar navbar-default av-nav" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav nav-tabs">
<li class="lia li1"><a href="#">Home</a></li>
<li class="dropdown li2"><a class="dropdown-toggle" data-toggle="dropdown">About</a><span class="nav-arrow"></span>
<div class="dropdown-menu">
<ul>
<li><a href="#">Drop 1</a></li>
<li><a href="#">Drop 2</a></li>
<li><a href="#">Drop 3</a></li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
My attempt at this:
$( document ).ready(function() {
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768)
section.addClass('nobg');
});
The CSS:
.nobg {background: none!important;}
What am I doing wrong that my code is not working?
5 Answers
Reset to default 8You may use these events provided by bootstrap for dropdowns :
show.bs.dropdown : This event fires immediately when the show instance method is called.
shown.bs.dropdown : This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to plete).
hide.bs.dropdown : This event is fired immediately when the hide instance method has been called.
hidden.bs.dropdown : This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to plete).
Usage :
$('.dropdown').on('show.bs.dropdown', function () {
// do something…
// In your case
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768){
section.addClass('nobg');}
})
$('.dropdown').on('hide.bs.dropdown', function () {
// do something…
// In your case
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768){
section.removeClass('nobg');}
})
I guess this will work, you might need to do some changes though.
you also need to check when window size is resize. can you plz try this code.
$( document ).ready(function() {
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768){
section.addClass('nobg');
}
$(window).resize(function(){
// on window resize call function to check window width.
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768){
section.addClass('nobg');
}
});
});
Use media queries:
@media screen and (max-width:767px){
.nobg:focus {background: none!important;}
}
Add the class to your anchor tag.
<a class="nobg"...
Pseudo-selectors a:hover should not work in Jquery selector.
First solution is to use hover or on('hover') to trigger the event.
Second one is to use css @media with max-width 768.
You are missing $, add this and try
$( document ).ready(function() {
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768)
$(section).addClass('nobg');
});