带有延迟弹出菜单的 Bootstrap 3 导航栏链接答案

【问题标题】：Bootstrap 3 navbar link with delayed popup menu带有延迟弹出菜单的 Bootstrap 3 导航栏链接
【发布时间】：2018-05-30 21:42:34
【问题描述】：

我正在尝试使用延迟弹出菜单的导航栏链接。我不想使用普通下拉菜单，因为我希望用户能够点击主链接，但如果他们悬停 1 秒，则会显示一个弹出菜单。

我已经创建了一个代码笔，但它不能正常工作。

在我的代码笔中，我在导航栏中创建了一个名为“jobs”的链接，如果用户单击它，他们应该导航到定义的 href。

但如果它们悬停，则会显示一个菜单。在我的代码笔中，我使用 javascript 使菜单悬停。但是当用户点击页面上的其他地方时，菜单不会消失。

https://codepen.io/iisfaq/pen/RJNJGN

  $('#btnJobs').hover(function (e) {
            //   e.stopPropagation();

            window.setTimeout(function () {

                $('#btnJobs').dropdown('toggle');
            }, 800);
        });

一旦显示弹出窗口，链接似乎也不再有效。

【问题讨论】：

标签： twitter-bootstrap menu hover delay

【解决方案1】：

您可以在做某事之前创建一段时间等待，例如：

$('#btnJobs').hover(function (e) {
  //   e.stopPropagation();

  var start = new Date().getTime() + 800;
  while (new Date().getTime() < start) {
    //wait
  }

  //After
  $('#btnJobs').dropdown('toggle');
});

【讨论】：

【解决方案2】：

请参考下面的小提琴。

在 unHover 上你想隐藏下拉菜单然后只需用这个替换你的代码。

Fiddle

$(function(){
    $('#btnJobs').hover(function(){
            window.setTimeout(function () {
            $('#btnJobs').dropdown('toggle');
        }, 800);
    }, function(){
        $('#btnJobs').parent().removeClass('open');
    });
});

对于外部点击

$('#btnJobs').hover(function(){
           window.setTimeout(function () {
              $('#btnJobs').dropdown('toggle');
           }, 800);
     }

    $(document).click(function(){
         if($('#btnJobs').parent().hasClass('open')){
             $('#btnJobs').parent().removeClass('open');
         }
    })

【讨论】：