Question

我有我在Stackoverflow上的另一个线程上获得的Javascript代码，但是当鼠标在导航栏标题和实际下拉菜单之间单击时，大约有1px的间隙，然后该下拉菜单将消失。

我抓取了这段代码，好像我想将鼠标悬停在上面，但是，如果它在移动中没有鼠标，那么我希望用户单击以打开下拉列表。

  //NAVBAR HOVER IF MOUSE, IF NOT CLICK
  $('body').on('mouseenter mouseleave', '.dropdown', function(e) {
    var _d = $(e.target).closest('.dropdown');
    _d.addClass('show');
    setTimeout(function() {
      _d[_d.is(':hover') ? 'addClass' : 'removeClass']('show');
      $('[data-toggle="dropdown"]', _d).attr(
        'aria-expanded',
        _d.is(':hover')
      );
    }, 300);
  });

无论如何，我是否可以为此添加一个延迟时间，以便让用户有时间克服该像素窗口？

我对Javascript / JQuery不太熟悉，但是认为数字结尾（300）可能会超时，因为这似乎是函数的结尾，因此我将其增加到60000，但这没有任何区别

感谢您的帮助。如果有所作为，Bootstrap也将开发此功能。

Answer 1

感谢您的所有帮助。

正如您所指向的CSS Kosh一样，我非常仔细地看了一眼，并添加了以下代码来解决我的问题：

.dropdown > .dropdown-menu {
  margin: 0;
}

这已经解决了问题，感谢您的帮助。

Answer 2

对于延迟，可以使用[Jquery.delay()][1]方法。它只会在调用.delay之后发生的任何事件之前发布延迟，例如

$( "div.first" ).slideUp( 300 ).delay(500).fadeIn(2000)

导航栏悬停鼠标

2 个答案: