如果显示bootstrap下拉列表,则jQuery在一定宽度上悬停添加类

Question

我正在使用带有下拉列表的bootstrap.我的锚在悬停时有背景颜色.但是当显示下拉列表时,我希望包含下拉列表的父级丢失背景颜色.

我的HTML是:

  <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>  

我的尝试:

    $( document ).ready(function() {
        var section = $('.av-nav .nav li a:hover');
        var width = section.width();
        if (width < 768)
            section.addClass('nobg');
    });

CSS:

.nobg {background: none!important;}

我的代码不起作用,我做错了什么？

Answer 1

您可以使用bootstrap提供的这些事件进行下拉:

show.bs.dropdown: 调用show实例方法时会立即触发此事件.

shown.bs.dropdown:当下拉菜单对用户可见时将触发此事件(将等待CSS转换完成)​​.

hide.bs.dropdown: 调用hide实例方法时会立即触发此事件.

hidden.bs.dropdown: 当下拉完成对用户隐藏时将触发此事件(将等待CSS转换完成)​​.

用法:

$('.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');}
    })

我想这会起作用,你可能需要做一些改变.