Javascript/jQuery 监视 CSS 更改

Question

我有一个简单的下拉菜单，当您单击它时会打开一个搜索字段。尽管我将此搜索的文本字段设置为自动对焦，但它并不适用于所有浏览器。

我将使用哪种 Javascript/jQuery 方法来检查包含的 UL css 显示是否设置为阻塞，以便我可以使用 .focus() 强制将焦点放在该字段上。

HTML:

<a href="#" id="quickSearch" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Quick Search</a>
<ul class="dropdown-menu" role="menu">
  <li id="li-quicksearch">
      <form id="mainSearch" class="form-search">
        <p>
            <input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
            <button type="submit">SUBMIT</button>
        </p>
      </form>
  </li>
</ul>

Answer 1

编辑:没有 css 更改事件，因此您必须通过 2 种方法中的一种来解决问题。

• 每隔一定时间检查dom元素，看看它的css有没有变化

• 当用户交互/您的代码更改 dom 元素的 css 时触发事件。

第一种方式看起来像这样:

var element = $(".dropdown-menu");
function checkForChanges()
{
    if (element.css('display') == 'block')
    {
        // do your .focus() stuff here
    }
    setTimeout(checkForChanges, 500); // does this every half second.
}

或者第二种方式:

$('.toggle').on('click', function() {
    $('.dropdown-menu').toggle();
    $('.dropdown-menu').trigger('change');
});
$('.dropdown-menu').on('change', function(){
    if($(this).css(.css('display') == 'block')
    {
        // do your .focus() stuff here
    }
});