0

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

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

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

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

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

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

            window.setTimeout(function () {

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

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

4

2 回答 2

0

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

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

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

  //After
  $('#btnJobs').dropdown('toggle');
});
于 2018-05-30T21:58:48.037 回答
0

请参考下面的小提琴。

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

小提琴

$(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');
         }
    })
于 2018-05-31T07:02:44.543 回答