jQuery add class on hover on certain width if bootstrap dropdown is showing

Question

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?

Answer 1

You 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 complete).

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 complete).

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.