javascript - 如果显示 bootstrap 下拉列表，jQuery 在悬停在一定宽度上时添加类

Question

我正在使用带下拉菜单的 Bootstrap 。我的 anchor 在悬停时有背景色。但是当下拉菜单显示时，我希望包含下拉菜单的父级失去背景颜色。

我的 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');}
    })

我想这会奏效，不过您可能需要做一些更改。